require('babel/register'）不'不起作用

require('babel/register') doesn't work

本文关键字：不起作用 register babel require      更新时间：2023-09-26

我在客户端用Babel transpiler用ES6编写了同构应用程序。我希望我的express服务器具有与客户端代码相同的ES6语法。

不幸的是，require('babel/register')不起作用。。

server.js

require('babel/register'); // doesn't work
// require('babel-core/register); doesn't work..
const env = process.env.NODE_ENV || 'development';
const port = process.env.NODE_PORT || 1995;
const http = require('http');
const express = require('express');
const address = require('network-address');
let app = express();
app.set('port', port);
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', (req, res) => {
   res.send('Hello!');
});
http.createServer(app).listen(app.get('port'), function () {
   console.info('Demo app is listening on "%s:%s" env="%s"', address(), app.get('port'), env);
});

由于Babel 6使用babel-register hook进行动态转译。

第一：

 npm install babel-register

然后要求使用：

require('babel-register');    
// not using 
// require('babel/register');
// or 
// require('babel-core/register);

要将您的Ecmascript 6代码转换为ecmascript 5，您必须设置Babel presets选项和require babel-register，如下所示：

require('babel-register')({
  presets: [ 'es2015' ]
});

与@alexander pustovalov的答案不同，您不需要.babelrc文件。

您还必须安装babel-preset-es2015:

npm install babel-preset-es2015

最后，Server.js文件将是：

require('babel-register')({
   presets: [ 'es2015' ]
});
const env = process.env.NODE_ENV || 'development';
const port = process.env.NODE_PORT || 1995;
const http = require('http');
const express = require('express');
const address = require('network-address');
let app = express();
app.set('port', port);
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', (req, res) => {
   res.send('Hello!');
});
http.createServer(app).listen(app.get('port'), function () {
   console.info('Demo app is listening on "%s:%s" env="%s"', address(), app.get('port'), env);
});

require('babel/register')不会对调用它的文件进行transfile。如果您希望server.js包含在动态编译中，那么应该使用babel-node（Babel的CLI替代node）来执行它。

举个例子，请看我的答案。

我在服务器上渲染react页面（.jsx）时遇到了类似的问题。我通过将下面的片段放在我的服务器文件的顶部来修复它

require('babel-register')({
    presets: ['es2015', 'react']
});

确保已安装npm babel-preset-es2015和babel-preset-react

2019年前夕，我们在JS相关库中仍然没有好的文档，但另一方面，我们有StackOverflow。

为了在Node.js上使用babel，您需要

  1. npm install @babel/register @babel/core @babel/preset-env
  2. 创建带有附加内容的文件pre-index.js
  3. 运行node pre-index

您只能在index.js中使用import s和其他功能，并将其归档为import s或require s。

require('@babel/register')({
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    node: "current"
                }
            }
        ]
    ]
});
require('./index.js');

根据本文档，您必须使用：

require("babel-register");

此外，您必须将.babelrc文件放在启动服务器的目录的根目录中。

{
  "presets": ["es2015"]   
}

修复此问题的步骤：

  1. 从server.js中删除require('babel/register');
  2. 创建另一个名为start.js的入口文件

  3. 在start.js中，

    require('babel/register'); module.exports = require('./server.js');

结果是，server.js中的所有代码都将被寄存器动态地转换。请确保您已使用.babelrc正确配置babel，其内容如下

{
  "presets": ["es2015", "stage-0"]
}

由于使用了Babel 7，您可以使用@Babel/register

npm install --save-dev @babel/core @babel/register

或

yarn add --dev @babel/core @babel/register

如果你用的是纱线。

在代码中只包含以下行：

require("@babel/register");

您需要使用Babel编译代码。查看他们网站上的文档。

使用npm install -g babel安装babel，然后使用babel app.js > compiledApp.js将ES6代码编译为ES5代码。然后可以运行compiledApp.js。

如果您想使用ES6的一些函数（如Object.assign），则仍然需要运行时babel/register，这些函数由于polyfill而未编译但执行。（点击此处查看示例和更多详细信息）

编辑：正如评论中所说，您可以使用register进行动态编译。但它将编译您在此register之后需要的模块。它将从node挂接require函数。点击此处了解更多信息。您仍然需要编译register所在的文件，或者在此文件中不使用任何ES6。

相关文章：