使导出默认使用Babel，webpack和Node.js [英] Making export default work with Babel, webpack and Node.js

问题描述

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

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

我将客户端代码放在 src 文件夹中。而在我的服务器文件夹中的服务器代码和服务器 server.js c $ c>文件夹。

这是目录结构：

  root 
  -  dist 
  -  node_modules 
  -  public 
  - 服务器
  -  src 
 server.js 
 webpack.base.js 
 webpack.dist.js 
 package.json 
 .babelrc 
  

PlayerManager.js file：

  class PlayerManager {
 
 constructor（）{
 if（！PlayerManager.instance）{
 this.playerList = {}; 
 this.bulletList = {}; 
 this.initPack = {player：[]，bullet：[]}; 
 this.removePack = {player：[]，bullet：[]}; 
 
 PlayerManager.instance = this; 
} 
 
返回PlayerManager.instance; 
} 
 
 resetData（）{
 this.initPack.player = []; 
 this.initPack.bullet = []; 
 this.removePack.player = []; 
 this.removePack.bullet = []; 
} 
 
} 
 
 const instance = new PlayerManager（）; 
 Object.freeze（instance）; 
 
导出默认实例; 
  

但是，当我使用 npm run dev 它运行 node server.js 它会引发错误说

 导出默认实例; 
 ^^^^^ 
 SyntaxError：异常令牌导出
在Object.exports.runInThisContext（vm.js：53：16）
  / pre> 
 
 
以下是webpack中babel的配置：
  const path = require（'path'）; 
 var CopyWebpackPlugin = require（'copy-webpack-plugin'）; 
 
 module.exports = {
条目：{
 main：'./src/main'
}，
 
输出：{ 
 path：path.join（__ dirname，'dist'），
 filename：'[name] .bundle.js'
}，
 
 plugins：[
 new CopyWebpackPlugin（[
 {from：'public / img'，
 to：'static'}，
 {from：'public'} 
]）
 
 
模块：{
装载机：[
 {
测试：/\.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 中：
  {
预设：[
es2015
]，
 
sourceRoot：./src
} 
  
在我的 package.json  file：
 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 --reporters
}，
  
 
 
解决方案
 Webpack是一种用于生成在客户端（在浏览器中）运行的软件包的bundle，它不知道或关心服务器上的代码。 （除非你正在做通用的应用程序）
 
 
 
你也会注意到，你的npm  dev 脚本只是问节点加载 server.js 文件，这是（正确的）在Webpack配置中的任何地方没有提到。
 
 
 
您正在寻找  babel-register   ：
 
 
您可以使用Babel的方式之一是通过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（）{} 
  
 
I can't figure out why my code doesn't work. 

I am building a ES6 style class and want to export it to be able to use it somewhere else in the server side. I put the code into a file called PlayerManager.jsin the server folder.

I put my client code in the src folder. And my server code in my server folder and server.js outside of server folder.

Here is the directory structure:
Root
 - dist
 - node_modules
 - public
 - server
 - src
 server.js
 webpack.base.js
 webpack.dist.js
 package.json
 .babelrc
PlayerManager.js file:
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;
However, when I use npm run dev which runs node server.js it throws an error saying 
export default instance;
^^^^^^
SyntaxError: Unexpected token export
    at Object.exports.runInThisContext (vm.js:53:16)
Here is the configuration for babel in webpack:
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']
  }
};
In .babelrc:
{
  "presets": [
    "es2015"
  ],

  "sourceRoot": "./src"
}
In my package.json file:
"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"
  },

解决方案
Webpack is a bundler for producing packages that run on the client (in the browser), it is not aware of or concerned with code on the server. (Unless you are doing universal application stuff.)

You will notice too that your npm dev script is simply asking node to load the server.js file, which is (correctly) not mentioned anywhere in your Webpack config.

You are looking for babel-register:

  
One of the ways you can use Babel is through the require hook. The require hook will bind itself to node’s require and automatically compile files on the fly.
Create an "entry" file that first requires babel-register and then requires your server.js file:
// server-entry.js
require('babel-register')
require('./server.js')
Now change your npm dev script to be node server-entry.js.

______

Aside: it is necessary to create an entry file as babel-register cannot transpile the file in which it is invoked. For example, this would fail:
// server.js
require('babel-register')

export default function () {}


                        
这篇关于使导出默认使用Babel，webpack和Node.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！