无法在 Webpacker 中的 vuex 突变测试中导入 vue.esm.js

Question

我在 this approach (requiring me to import vue.esm.js). I would like to test my vuex mutations as described in testing vuex docs 中使用 Webpacker。它在我使用 import Vue from 'vue' 时有效，但在我使用 import Vue from 'vue/dist/vue.esm' 时无效。但是，如果我不在我的商店中使用 vue.esm，我的 Webpacker 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;
    ^^^^^^

    SyntaxError: Unexpected token export

我做错了什么？

Answer 1

不确定您是否解决了这个问题，但我运行遇到了同样的问题。对我有用的是使用 '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 Vue from 'vue';) 中更新导入，我们就完成了！

无法在 Webpacker 中的 vuex 突变测试中导入 vue.esm.js

Cannot import vue.esm.js in vuex mutations test in Webpacker

ruby-on-rails

vue.js

tdd

vuex

webpacker