Webpack代码拆分打破了vueJs组件的混乱导入 [英] Webpack code splitting breaks jest import with vueJs components

问题描述

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

Jest is throwing an error when trying to load a vueJs component that has dynamic import code.

组件:

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

    export default {
        name: "TileEditModal",
        components: {
            Modal
        },
        data() {
            return 
        },
        methods: {
            test() {
                return true;
            }
        }
    }
</script>

测试:

import TileEditModal from "./TileEditModal.vue"

即使没有运行测试，仅导入该组件也会引发以下错误:

Even with no test running, just importing that component will throw the following error:

  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.<anonymous> (srcVue/pages/landing/TileEditModal.vue.test.js:3:22)

我已经尝试过此解决方案，但是它对我没有用

I've tried this solution but it has not worked for me.

我正在用jest-vue-preprocessor开玩笑:

  "jest": {
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    },
    "clearMocks": true,
    "resetMocks": true,
    "resetModules": true
  },

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

I have also tried adding env.test preset to babel:

{
    "presets": [
      "es2015",
      "stage-2",
      "stage-0"
    ],
    "env": {
      "test": {
        "presets": [
          "es2015",
          "stage-2",
          "stage-0"
        ]
      }
    } 
  }

到目前为止，什么都行不通，有什么主意吗?我真的很想让此代码拆分以在单个组件上工作.

So far nothing works, any ideas? I really want to get this code splitting to work on individual components.

推荐答案

对我有用的解决方案是使用动态导入babel插件，但也可以在没有缓存的情况下运行.

The solution that worked for me was to use the dynamic import babel plugin but also run jest without cache.

玩笑--no-cache

jest --no-cache

不幸的是，在那之后再次使用缓存运行它仍然无法通过测试，因此不确定发生了什么，但是如果我离开--no-cache，它仍然可以工作.只是会使测试变慢.

Unfortunately running it with cache again after that still fails the test so am not sure what's going on, but it works if I leave --no-cache. Just makes the tests slower.

这篇关于Webpack代码拆分打破了vueJs组件的混乱导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！