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

匿名 (未验证) 提交于 2019-12-03 02:56:01

问题:

I have isomorphic app written in ES6 on client with Babel transpiler. I want my express server to have the same ES6 syntax as client code.

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

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); }); 

回答1:

require('babel/register') doesn't transpile the file it is called from. If you want server.js to be included in on-the-fly transpilation, you should execute it with babel-node (Babel's CLI replacement for node).

See my answer here for an example.



回答2:

Since Babel 6 use babel-register hook to make on-the-fly transpilation.

First:

 npm install babel-register 

Then require it with:

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

To Convert your Ecmascript 6 code to ecmascript 5, you must set Babel presets option with require babel-register Like this:

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

Unlike the answer of @alexander-pustovalov you do not need to .babelrc file.

you must also install babel-preset-es2015:

npm install babel-preset-es2015 

Finally your Server.js file will be:

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); }); 


回答3:

I ran into a similar issue trying to render a react page (.jsx) on the server. I fixed it by putting the snippet below at the top of my server file

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

make sure you have npm babel-preset-es2015 and babel-preset-react installed



回答4:

According to this document you have to use:

require("babel-register"); 

Additionally, you have to put .babelrc file in the root of directory from which you start server.

{   "presets": ["es2015"]    } 


回答5:

steps to fix this:

  1. remove require('babel/register'); from server.js
  2. create another entry file called start.js
  3. in start.js,

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

The result is that all code inside server.js will be transpiled on the fly by the register. Please make sure you have configured babel correctly with a .babelrc having the content like below

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


回答6:

You need to compile your code using Babel. Check out the docs from their website.

Install babel with npm install -g babel then do babel app.js > compiledApp.js to compile your ES6 code into ES5 code. You can then run compiledApp.js.

The runtime babel/register is still needed if your want to use some functions of ES6 like Object.assign which are not compiled but executed thanks to a polyfill. (Check here for examples and more details)

Edit: As said in the comment, you can use the register to compile on the fly. But it will compile modules you are requiring after this register. It will hook the require function from node. More here. You will still need to compile the file where the register or to not use any ES6 in this file.



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!