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

Question

我["@babel/plugin-syntax-dynamic-import"]在我的.babelrc文件中，并且我能够成功地对我自己项目中的 Vue 文件使用动态导入，但是当我尝试导入 node/npm 模块import App from '@something/app';时，在使用 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 对自身进行 Babeling 和core-js. 这可以通过添加ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/]到您的babel.config.js.

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

到目前为止，上述步骤对我来说非常有效，如果我发现任何其他障碍，我一定会更新此答案。