使用 Babel、webpack 和 Node.js 使导出默认工作

Question

我不知道为什么我的代码不起作用。

我正在构建一个 ES6 样式类，并希望将其导出以便能够在服务器端的其他地方使用它。我将代码放入server文件夹中名为PlayerManager.js的文件中。

我将客户端代码放在src 文件夹中。我的服务器代码在我的server 文件夹和server.js 在server 文件夹之外。

目录结构如下：

Root
 - dist
 - node_modules
 - public
 - server
 - src
 server.js
 webpack.base.js
 webpack.dist.js
 package.json
 .babelrc

PlayerManager.js文件：

class PlayerManager {

    constructor() {
        if (! PlayerManager.instance) {
            this.playerList = {};
            this.bulletList = {};
            this.initPack = {player: [], bullet: []};
            this.removePack = {player: [], bullet: []};

            PlayerManager.instance = this;
        }

        return PlayerManager.instance;
    }

    resetData() {
        this.initPack.player = [];
        this.initPack.bullet = [];
        this.removePack.player = [];
        this.removePack.bullet = [];
    }

}

const instance = new PlayerManager();
Object.freeze(instance);

export default instance;

但是，当我使用运行node server.js 的npm run dev 时，它会抛出一个错误提示

export default instance;
^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:53:16)

下面是 webpack 中 babel 的配置：

const path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    main: './src/main'
  },

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js'
  },

  plugins: [
    new CopyWebpackPlugin([
        { from: 'public/img',
          to: 'static' },
        { from: 'public' }
      ])
  ],

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        //include: path.join(__dirname, 'src')
        exclude: [
          path.resolve(__dirname, "node_modules"),
        ],
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=90000' } 
    ]
  },

  resolve: {
    extensions: ['', '.js']
  }
};

在.babelrc:

{
  "presets": [
    "es2015"
  ],

  "sourceRoot": "./src"
}

在我的package.json 文件中：

"scripts": {
    "build": "npm run lint && npm run release",
    "lint": "./node_modules/.bin/eslint ./src/**/*.js",
    "dev": "node server.js",
    "release": "NODE_ENV=production webpack --config ./webpack.dist.js --progress",
    "test": "./test/*.test.js --compilers js:babel-core/register --recursive --reporter spec"
  },

Answer 1

Webpack 是一个打包器，用于生成在客户端（在浏览器中）运行的包，它不知道也不关心服务器上的代码。 （除非你在做通用应用的东西。）

您还会注意到，您的 npm dev 脚本只是要求节点加载 server.js 文件，这（正确地）在您的 Webpack 配置中的任何地方都没有提及。

您正在寻找babel-register:

使用 Babel 的一种方式是通过 require 钩子。 require 钩子会将自己绑定到 node 的 require 并自动动态编译文件。

创建一个“入口”文件，首先需要babel-register，然后需要您的server.js 文件：

// server-entry.js
require('babel-register')
require('./server.js')

现在将您的 npm dev 脚本更改为 node server-entry.js。

______

另外：有必要创建一个入口文件，因为babel-register 无法转换调用它的文件。例如，这会失败：

// server.js
require('babel-register')

export default function () {}