Vue+webpack+vue-loader 프로젝트의 다른 js 파일에서 기능을 가져오는 방법

Vue+webpack+vue-loader 프로젝트의 다른 js 파일에서 기능을 가져오는 방법

(다른 JavaScript 파일에 JavaScript 파일을 포함하려면 어떻게 해야 하나?)

Javascipt + Vue + 웹 팩 + vue-loader nobb...가장 단순한 것에 비틀거리는 것!

있습니다App.vue템플릿 포함:

    <template>
     <div id="app">
         <login v-if="isTokenAvailable()"></login>
     </div>
    </template>

나는 그 일을 선포했다.isTokenAvailable내부의 Vue에 대한 정상적인 방법methods. 내가 따로 쓴 함수를 사용한다.js파일:

<script>
    import * as mylib from './mylib';

    export default {
      ....
        methods:{
            isTokenAvailable: () => {
                return mylib.myfunc();
            }
        }
    }
</script>

mylib다음과 같이 시작한다.

    import models from './model/models'
    import axois from 'axios'

    export default function() {
        // functions and constants
    }

프로젝트를 실행할 때 다음과 같은 경고가 표시됨:

    export 'myfunc' (imported as 'mylib') was not found in './mylib'

자바스크립트 모듈을 제대로 가져오거나 선언하지 않은 것 같은데...하지만 그렇게 많은 방법들이 있는 것 같다. 게다가 부에에서의 스코핑의 복잡함까지 더해져, 나는 그것을 하는 올바른 방법이 무엇인지 잘 모르겠다.

미리 고맙다.

왜 이것이 과장이 아닌가:다른 JavaScript 파일에 JavaScript 파일을 포함하려면 어떻게 해야 하는가?

문제를 해결하지 않는 것 같군 특히 부에즈 문맥에서 말이야.

나는 이것을 시도했다:

<script>
    const mylib = require('./mylib');
    ...
</script>

기능을 다음으로 수정하는 경우:exports.myfunc = function()

이 일이 잘 되려면 내가 다른 의존을 가져야 할까?다른 오류가 발생하기 때문에:

    [Vue warn]: Error in render function:
    TypeError: mylib.myfunc is not a function

다음 위치에서 구성 요소로 데이터를 가져오려고 함src/mylib.js:

var test = {
  foo () { console.log('foo') },
  bar () { console.log('bar') },
  baz () { console.log('baz') }
}

export default test

내 .Vue 파일에 단순하게 가져온test로부터src/mylib.js:

<script> 
  import test from '@/mylib'

  console.log(test.foo())
  ...
</script>

몇 시간 동안 장난을 친 후, 나는 결국 효과가 있는 것을 얻었고, 여기 비슷한 문제에서 부분적으로 대답했다.다른 JavaScript 파일에 JavaScript 파일을 포함하려면 어떻게 해야 하는가?

그러나 그 나머지를 망치고 있는 수입원이 있었다.

사용 요구 사항:.vue파일들

<script>
  var mylib = require('./mylib');
  export default {
  ....

수출인mylib

 exports.myfunc = () => {....}

피하다import

(관련이 없다고 생각했던) 내 사건의 실제 쟁점은 바로 그것이었다.mylib.js그 자체가 다른 의존성을 이용하는 것이었죠.그 결과 발생한 오류는 이것과는 무관한 것으로 보이며, 에서 전송되는 오류는 없었다.webpack하지만 어쨌든 나는 다음과 같이 했다.

import models from './model/models'
import axios from 'axios'

이건 내가 사용하지 않는 한 효과가 있다.mylib의.vue구성 요소그러나 내가 사용하는 즉시mylib거기서, 이 이슈에 기술된 에러가 발생한다.

다음으로 변경:

let models = require('./model/models');
let axios = require('axios');

그리고 모든 것이 예상대로 작동한다.

Anacrust의 답변이 마음에 드는데, "console.log"가 두 번 실행된다는 사실에 의해, 다음에 대해 작은 업데이트를 하고 싶다.src/mylib.js:

let test = {
  foo () { return 'foo' },
  bar () { return 'bar' },
  baz () { return 'baz' }
}

export default test

다른 모든 코드는 동일하게 유지된다...

나는 vue app 코드를 정리하려다가 우연히 이 질문을 하게 되었는데, 내 컴포넌트에 논리가 많고 다른 하위 코포넌트를 사용할 수 없기 때문에, 별도의 js파일에 많은 기능을 사용하고 vue파일에 전화하는 것이 이치에 맞는다. 그래서 여기 나의 시도가 있다.

1)구성 요소(.vue 파일)

//MyComponent.vue file
<template>
  <div>
  <div>Hello {{name}}</div>
  <button @click="function_A">Read Name</button>
  <button @click="function_B">Write Name</button>
  <button @click="function_C">Reset</button>
  <div>{{message}}</div>
  </div>
 </template>


<script>
import Mylib from "./Mylib"; // <-- import
export default {
  name: "MyComponent",
  data() {
    return {
      name: "Bob",
      message: "click on the buttons"
    };
  },
  methods: {
    function_A() {
      Mylib.myfuncA(this); // <---read data
    },
    function_B() {
      Mylib.myfuncB(this); // <---write data
    },
    function_C() {
      Mylib.myfuncC(this); // <---write data
    }
  }
};
</script>

2)외부 js 파일

//Mylib.js
let exports = {};

// this (vue instance) is passed as that , so we
// can read and write data from and to it as we please :)
exports.myfuncA = (that) => {
  that.message =
  "you hit ''myfuncA'' function that is located in Mylib.js  and data.name = " +
    that.name;
};

exports.myfuncB = (that) => {
  that.message =
  "you hit ''myfuncB'' function that is located in Mylib.js and now I will change the name to Nassim";
  that.name = "Nassim"; // <-- change name to Nassim
};

exports.myfuncC = (that) => {
  that.message =
  "you hit ''myfuncC'' function that is located in Mylib.js and now I will change the name back to Bob";
  that.name = "Bob"; // <-- change name to Bob
};

export default exports;

3)실행 중 참조: https://codesandbox.io/s/distracted-pare-vuw7i?file=/src/구성요소/MyComponent.vue

---

편집하다

Vue에 대한 더 많은 경험을 얻은 후, 나는 당신이 당신의 코드를 다른 파일로 분할하고 더 쉽게 코드화하고 유지하기 위해 mixins를 사용할 수 있다는 것을 알았다. https://vuejs.org/v2/guide/mixins.html

참조URL: https://stackoverflow.com/questions/43608457/how-to-import-functions-from-different-js-file-in-a-vuewebpackvue-loader-proje