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

Posted 2023-02-22

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

【英文标题】：@babel/plugin-syntax-dynamic-import not working in imported node module

【发布时间】：2019-11-27 16:00:50

【问题描述】：

我的.babelrc 文件中有["@babel/plugin-syntax-dynamic-import"]，并且我成功地能够对我自己项目中的Vue 文件使用动态导入，但是当尝试使用import App from '@something/app'; 导入node/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 在导入节点模块时应用这个插件吗？

谢谢

【问题讨论】：

所以我可以通过将节点模块的内容复制到我自己的项目并删除 package.json 来解决这个问题，如果 package.json 在那里它不起作用......

它只是 package.json 文件在那里，即使它只是空的。

好的，这显然是 .babelrc 的预期行为，只是试图解决它。

【参考方案1】：

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

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

一旦你将 Babel 应用到你的 node_modules，你将创建不同的问题。您需要防止 Babel 自己和core-js 进行 Babeling。通过将ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/] 添加到您的babel.config.js 可以防止这种情况发生。

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

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