使用 babel 从 node_modules 导入module但失败

IT技术 reactjs babeljs
2021-03-28 09:54:09

我用es6写了一个module并发布到npm，我想在另一个项目中使用它，所以我这样输入：

import {ActionButton} from 'rcomponents'

但它没有用：

D:\github\blog\node_modules\rcomponents\src\actionButton.jsx:1
(function (exports, require, module, __filename, __dirname) { import React fro
                                                              ^^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Module._extensions..js (module.js:478:10)
    at Object.require.extensions.(anonymous function) [as .jsx] (D:\github\blog\
node_modules\babel\node_modules\babel-core\lib\api\register\node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at D:\github\blog\node_modules\rcomponents\src\index.js:3:19
    at Object.<anonymous> (D:\github\blog\node_modules\rcomponents\src\index.js:
7:3)

这是我在 webpack 中的 js 加载器配置：

{ test: /\.jsx?$/, loader: `babel?cacheDirectory=${babelCache}` }

当我尝试导入一个不是 from 的module时node_modules，babel 运行良好。但是从 导入一个modulenode_modules，babel 好像不行？

3个回答

查看babel 文档：

注意：默认情况下，node_modules 的所有要求都将被忽略。您可以通过传递忽略正则表达式来覆盖它。

通常期望module中的modulenode_modules已经提前被编译，所以它们不会被 Babel 处理。如果您不这样做，那么您需要告诉它它可以处理哪些文件。ignore允许。

require("babel/register")({
    // Ignore everything in node_modules except node_modules/rcomponents.
    ignore: /node_modules\/(?!rcomponents)/
});
这不是 Babel 6 的合适答案，我遇到了类似的情况，似乎找不到任何方法来从节点module转译module。就像那些仍在寻找 Babel 6 解决方案的人的附录一样。
2021-05-26 09:54:09
如果您想对 babel-node 使用相同的方法，您可以这样做 babel-node --ignore '/node_modules/(?!my_module1|my_module2)' script.js
2021-05-31 09:54:09
如果您有特定的可重现示例，请随时访问 Babel 在 Slack 上的支持频道。不过，这应该适用于 Babel 6。
2021-06-09 09:54:09
@remino 它需要作为应用程序代码的一部分运行，并且它需要在需要编译的任何文件容器代码之前加载的文件中，因此您可以拥有一个加载 babel 的根文件，然后require("./app.js");在 Babel 之后运行您的应用程序代码。
2021-06-13 09:54:09
我同意，我也无法使用 babel 6 编译 node_modules module
2021-06-20 09:54:09

一般来说，上传到 npm 的包应该是预编译的，这样用户就可以收到普通的 JS 并且不需要构建步骤。npm prepublish为此使用。

但是，如果您使用 webpack，则可以exclude在 webpack 配置中指定一个函数（请参阅webpack 文档）：

module: {
  loaders: [{
    test: /.jsx?$/,
    loader: 'babel-loader',
    exclude(file) {
      if (file.startsWith(__dirname + '/node_modules/this-package-is-es6')) {
        return false;
      }
      return file.startsWith(__dirname + '/node_modules');
    },

如果你直接使用 babel，你可以ignore在 require hook 中写一个类似的函数。

> 如果你直接使用 babel，你可以在 require 钩子里写一个类似的 ignore 函数。但是，这去哪儿了？你在哪里添加require('@babel/register')声明？在每个使用 ES6 module的文件中？
2021-06-06 09:54:09

对于这种情况，您可以使用https://www.npmjs.com/package/babel-node-modules

npm install --save-dev babel-node-modules
require('babel-node-modules')([
  'helloworld' // add an array of module names here 
]);

然后它将列出的module编译为其他文件

其它你可能感兴趣的问题
上一篇React - 如何打开 PDF 文件作为 href 目标空白 下一篇componentDidMount() 中的 setState() 是否被视为反模式