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

我有一个使用babel-node运行服务器的工作正常的项目。

然而，尝试了2天后，我无法将其编译到ES5。

我试着运行babel，但是那不包括依赖关系。 我试图创build一个webpackconfiguration只是为了服务器，但我目前卡住的错误：

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

用于服务器的webpackconfiguration与我用于编译我的客户端代码[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/ （selectcli）以获取更多详细信息。

Answer 2

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

要过去mimetypes的错误，我需要添加下面的代码，我发现@ 我怎样才能使用快递的webpack？ ：

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

然后所有其他configuration需要（也见https://github.com/webpack/webpack/issues/1599%22 ）：

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

我仍然喜欢简单的babel-cli解决scheme，但是这个工作。