Question

我无法弄清楚为什么我的代码不起作用。

我正在构建一个ES6样式类，并希望将其导出以便能够在服务器端的其他位置使用它。我将代码放入angular .module ( 'MyApp', ['ngMaterial', 'ngMessages'] ) .controller ( 'AppCtrl', function() { this.currentNavItem = "home"; } );文件夹中名为PlayerManager.js的文件中。

我将客户端代码放在server文件夹中。我的服务器代码位于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;的{{1}}时会抛出错误

npm run dev

以下是webpack中babel的配置：

node server.js

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

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"
}

Answer 1

Webpack是一个捆绑器，用于生成在客户端（在浏览器中）运行的包，它不知道或不关心服务器上的代码。（除非你正在做普遍的应用程序。）

你也会注意到你的npm dev脚本只是要求节点加载server.js文件，这个文件在Webpack配置的任何地方都没有被提及。

您正在寻找babel-register：

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

创建＆＃34;条目＆＃34;首先需要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 () {}

使导出默认值与Babel，webpack和Node.js一起使用

1 个答案: