Webpacker의 vuex 돌연변이 테스트에서 vue.esm.js를 가져올 수 없습니다.

Webpacker의 vuex 돌연변이 테스트에서 vue.esm.js를 가져올 수 없습니다.

이 방법으로 Web Packer를 사용하고 있습니다(vue.esm.js Import 필요).vuex 문서 테스트에 설명된 대로 vuex 돌연변이를 테스트하고 싶습니다.사용할 때 동작합니다.import Vue from 'vue'하지만 사용할 때는 그렇지 않습니다.import Vue from 'vue/dist/vue.esm'하지만 매장에서 vue.esm을 사용하지 않으면 웹패커 Vue 앱이 고장납니다.

여기가 제 가게입니다.

// store.js
import Vue from 'vue/dist/vue.esm' // changing this to import from 'vue' works
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  count: 0
}

// export `mutations` as a named export
export const mutations = {
  increment: state => state.count++
}

export default new Vuex.Store({
  state,
  mutations
})

테스트 결과는 다음과 같습니다.

import { mutations } from './store'

// destructure assign `mutations`
const { increment } = mutations

describe('mutations', () => {
  it('INCREMENT', () => {
    // mock state
    const state = { count: 0 }
    // apply mutation
    increment(state)
    // assert result
    expect(state.count).toBe(1)
  })
})

위의 테스트 출력은 다음과 같습니다.

 FAIL  app/javascript/test/unit/specs/mutations.spec.js
  ● Test suite failed to run

    myproject/node_modules/vue/dist/vue.esm.js:10671
    export default Vue$3;
    ^^^^^^

    SyntaxError: Unexpected token export

내가 뭘 잘못하고 있지?

네가 이걸 해결했는지 모르겠지만 나도 같은 문제에 부딪혔어.나에게 효과가 있었던 것은 'vue'의 별칭을 사용하는 것이었다.여기와 동일: https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration

// custom.js
const vueFile = process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js';
module.exports = {
  resolve: {
    alias: {
      vue: vueFile,
      vue_resource: 'vue-resource/dist/vue-resource',
    },
  },
};

// environment.js
const { environment } = require('@rails/webpacker');
const customConfig = require('./custom');
const vue = require('./loaders/vue');

environment.config.merge(customConfig);
environment.loaders.append('vue', vue);

module.exports = environment;

그런 다음 내 스토어와 앱 JS에서 Import를 업데이트합니다.import Vue from 'vue';그럼 우린 해결됐어!

언급URL : https://stackoverflow.com/questions/47837971/cannot-import-vue-esm-js-in-vuex-mutations-test-in-webpacker