如何将 ES6 node 和 jsx 代码编译成 ES5 vanilla JS

Question

我有一个项目在开发中使用 babel-node 到运行服务器运行良好。

可是试了2天，还是编译不了ES5。

我试过运行ning babel，但不包括依赖项。我尝试为服务器创建一个 webpack 配置，但我目前遇到错误：

fs.js:634
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
             ^
Error: ENOENT: no such file or directory, open '/types/mime.types'

我用于服务器的 webpack 配置几乎与我用于编译客户端代码的配置相同[100% 有效]：

var webpack = require('webpack');
var path = require('path');
var WebpackNotifierPlugin = require('webpack-notifier');

var BUILD_DIR = path.resolve(__dirname, 'static');
var APP_DIR = path.resolve(__dirname, 'src');
var DATA_DIR = path.resolve(__dirname, 'json');

module.exports = {
    target: "node",
  devtool: 'source-map',
  // This will be our app's entry point (webpack will look for it in the 'src' directory due to the modulesDirectory setting below). Feel free to change as desired.
  entry: [
    APP_DIR + '/server.js',
  ],
  // Output the bundled JS to dist/app.js
  output: {
    path: BUILD_DIR,
    filename: 'prod-server.js',
  },
    node: {
      fs: "empty",
        net: "empty"
    },
  module: {
    loaders: [
      { test: /\.jsx?$/, loaders: ['babel'], include: APP_DIR },
      { test: /\.json$/, loaders: ["json-loader"] }
    ]
  },
  plugins: [
    // Set up the notifier plugin - you can remove this (or set alwaysNotify false) if desired
    new WebpackNotifierPlugin({ alwaysNotify: true }),
  ]
};

如果 babel-node 很好运行事情顺利进行，必须有一种更简单的方法将服务器编译为节点可以运行.

的 ES5

编辑：错误的完整堆栈跟踪：

fs.js:634
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/types/mime.types'
    at Error (native)
    at Object.fs.openSync (fs.js:634:18)
    at Object.fs.readFileSync (fs.js:502:33)
    at a.load (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:505)
    at Object.<anonymous> (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:934)
    at Object.<anonymous> (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:1129)
    at t (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:169)
    at Object.e.exports (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:29:2855)
    at t (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:169)
    at Object.n (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:7248)

Answer 1

您可以使用babel-cli编译。你必须安装预设的 es2015 并做出反应，以便 babel 知道如何编译它。并设置 .babelrc 文件

有关详细信息，请参阅 https://babeljs.io/docs/usage/cli/ and https://babeljs.io/docs/setup/（选择 cli）。

Answer 2

要编译节点代码，需要对 webpack 进行一些配置调整。首先，我需要将我的服务器放在 node_modules 以上的目录中，即。在我的 src 文件夹中，而不是根项目目录中。

为了克服 MIME 类型错误，我需要添加以下代码，这是我在@ :

中找到的

var nodeModules = {};
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
    .filter(x => ['.bin'].indexOf(x) === -1)
    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });

然后需要的所有额外配置（另见 https://github.com/webpack/webpack/issues/1599%22）：

target: "node",
externals: nodeModules,
node: {
    fs: "empty",
    net: "empty",
    __dirname: false,
    __filename: false,
}

我仍然更喜欢简单的 babel-cli 解决方案，但这很有效。

如何将 ES6 node 和 jsx 代码编译成 ES5 vanilla JS

How to compile ES6 node and jsx code into ES5 vanilla JS

jsx

node.js

ecmascript-6

babeljs