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

Question

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

但是尝试了 2 天后，我无法将其编译为 ES5。

我尝试运行 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/ 和 https://babeljs.io/docs/setup/（选择 cli）。

Answer 2

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

为了克服 mime 类型错误，我需要添加以下代码，我发现 @How can I use webpack with express? ：

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 解决方案，但这很有效。