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

Question

我的 .babelrc 文件中有 ["@babel/plugin-syntax-dynamic-import"]，并且我能够成功地对我自己项目中的 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 自身和 core-js。通过将 ignore: [/[\/\]core-js/, /@babel[\/\]runtime/] 添加到您的 babel.config.js.

可以防止这种情况发生

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

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

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

@babel/plugin-syntax-dynamic-import not working in imported node module

vue.js

webpack

babeljs

webpack-4