Node.js 如何将ES6节点和jsx代码编译成ES5 JS

Node.js 如何将ES6节点和jsx代码编译成ES5 JS,node.js,ecmascript-6,jsx,babeljs,Node.js,Ecmascript 6,Jsx,Babeljs,我有一个在dev中使用babel节点运行服务器的项目,该项目运行良好 然而,在尝试了2天后,我无法将其编译为ES5 我试着运行babel,但不包括依赖项。 我尝试仅为服务器创建一个webpack配置,但当前遇到以下错误: fs.js:634 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); ^ Error: ENOENT: no such file or direct

我有一个在dev中使用babel节点运行服务器的项目,该项目运行良好

然而,在尝试了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'
我在服务器上使用的网页包配置与我在编译客户端代码时使用的网页包配置几乎相同[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节点能够顺利运行,那么必须有一种更简单的方法将服务器编译为节点可以运行的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)
fs.js:634
返回binding.open(pathModule.\u makeLong(path)、stringToFlags(flags)、mode);
^
错误:enoint:没有这样的文件或目录,请打开“/types/mime.types”
错误(本机)
在Object.fs.openSync(fs.js:634:18)
在Object.fs.readFileSync(fs.js:502:33)
在a.load(/Users/funk/Development/Projects/jayeh_2015/static/prod server.js:210:505)
反对。(/Users/funk/Development/Projects/jayeh_2015/static/prod server.js:210:934)
反对。(/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)
在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)
在Object.n(/Users/funk/Development/Projects/jayeh_2015/static/prod server.js:1:7248)

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


有关更多详细信息,请参阅和(选择cli)。

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

为了克服mime类型错误,我需要添加以下代码,我发现@:

然后需要所有其他配置(另请参阅):


我仍然希望使用简单的babel cli解决方案,但这很管用。

是否有更多关于该错误的堆栈跟踪?当然。我将编辑问题并将其添加到底部。根据,我更改了我的网页配置并得到了不同的错误,这可能是进度?它比第一个更具信息性:“return binding.stat(pathModule.\u makeLong(path));没有这样的文件或目录,stat'/favicon.ico'”这让我觉得这个“pathModule.\u makeLong”没有使路径变长。。。所以node在错误的位置查找这些文件。哦,然后我看到“”。。。无论如何,我仍然在寻找解决办法。编辑:服务器正在运行!!!!让我看看是否有任何东西加载…好的,服务器可以工作,但没有加载,但我认为这是因为我一直在混乱的路径,试图让事情正常工作。在我把事情做好之后,我会试着把问题归结起来,然后写一个解决方案。。。这并不简单。。。我为巴贝尔人没有提供一个简单的解决方案而感到羞耻,他们强迫别人使用不同的工具来获取编译后的源代码。编辑:不管它如何工作,都有一百万条警告……谢谢,但这显然是我做的第一件事。简单地按原样运行babel只会为服务器生成一个小文件,不遵循任何导入操作,然后当我运行输出的文件时,它会说它找不到我导入的第一个模块文件。这是节点的更标准的babel方法,但通常您会将所有代码放在
src
目录中,并编译整个目录。正如您所说,Babel不遵循导入。请小心使用此解决方案,如果您有私人组织包,则不会包括这些包,因为存储在node_modules/@organization/packageName中,您可以在readdirSync之后立即“手动”添加它们。使用
nodeModules['@myorg/mypackage']='commonjs-mypackage'
var nodeModules = {};
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
    .filter(x => ['.bin'].indexOf(x) === -1)
    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });
target: "node",
externals: nodeModules,
node: {
    fs: "empty",
    net: "empty",
    __dirname: false,
    __filename: false,
}