vue拆分js文件_javascript – Webpack代码拆分打破了jue导入与vueJs组件

尝试加载具有动态导入代码的vueJs组件时,Jest会抛出错误.

零件：

const Modal = () => import(/* webpackChunkName: "Modal" */ "../pages/common/Modal.vue");

export default {

name: "TileEditModal",

components: {

Modal

},

data() {

return

},

methods: {

test() {

return true;

}

}

}

测试：

import TileEditModal from "./TileEditModal.vue"

即使没有运行测试,只需导入该组件也会引发以下错误：

return import( /* webpackChunkName: "Modal" */"../pages/common/Modal.vue");

^^^^^^

SyntaxError: Unexpected token import

at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)

at Object. (srcVue/pages/landing/TileEditModal.vue.test.js:3:22)

我试过这个solution,但它对我不起作用.

我正在使用带有jest的jest-vue-preprocessor：

"jest": {

"moduleFileExtensions": [

"js",

"vue"

],

"transform": {

"^.+\\.js$": "/node_modules/babel-jest",

".*\\.(vue)$": "/node_modules/jest-vue-preprocessor"

},

"clearMocks": true,

"resetMocks": true,

"resetModules": true

},

我也尝试将env.test预设添加到babel：

{

"presets": [

"es2015",

"stage-2",

"stage-0"

],

"env": {

"test": {

"presets": [

"es2015",

"stage-2",

"stage-0"

]

}

}

}

到目前为止没有任何作用,任何想法我真的希望将这些代码拆分为单个组件.