vue.js - @babel/plugin-syntax-dynamic-import 在导入的节点模块中不起作用

Question

我有 ["@babel/plugin-syntax-dynamic-import"]在我的.babelrc文件，并且我成功地能够在我自己的项目中的 Vue 文件上使用动态导入，但是当尝试使用 import App from '@something/app'; 导入节点/npm 模块时使用 Webpack 构建时出现此错误:

SyntaxError: \node_modules\@something\app\src\SomeApp.vue: Support for the experimental syntax 'dynamicImport' isn't currently enabled (16:19):

  14 |  name: 'SomeApp',
  15 |  components: {
> 16 |      SomeCompontent: () => import('./some-dir/SomeCompontent.vue'),
     |                      ^


Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.

@babel/plugin-syntax-dynamic-import在我的项目中作为插件启用，并且正在导入节点模块，但 Babel 出于某种原因不尊重这一点。

在导入节点模块时，我需要做些什么才能让 Babel 应用这个插件吗？

谢谢

Answer 1

因此，正如我在评论中所写，这是 Babel 中的预期行为。
但是解决它并不是非常简单，所以我正在记录如何做到这一点，以防其他人都需要它。

您需要使用 babel.config.js而不是 .babelrc ，这是一种更全局的配置方式。文档在这里:https://babeljs.io/docs/en/configuration
真的，虽然它可以像复制和粘贴你的 .babelrc 一样简单至babel.config.js并添加 module.exports =在对象之前。

一旦你将 Babel 应用到你的 node_modules您将创建不同的问题。你需要阻止 Babel 自己和 core-js .这可以通过添加 ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/] 来防止。给您的babel.config.js .

最后你需要防止 Babel 弄乱你的导出，因为你不能混合使用 modules.exports和 export default .这个修复对我来说似乎有点 hacky，但是¯\_(ツ)_/¯。我们需要做的最后一件事是添加 'sourceType': 'unambiguous'也给您的babel.config.js .

到目前为止，上述步骤对我来说非常有效，如果我发现任何其他道路颠簸，我一定会更新这个答案。