Question

我有一个使用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解决方案，但这很有效。

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

2 个答案: