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ファイル：私はnode server.jsを実行するnpm run devを使用する場合

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; 

しかし、それはここで

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

を言って、エラーをスローしていますwebpacのbabelの設定K：

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で：私のpackage.jsonファイルで

{ 
    "presets": [ 
    "es2015" 
    ], 

    "sourceRoot": "./src" 
} 

：

"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スクリプトでは、Webpack設定のどこにも（正確に）記載されていないserver.jsファイルをノードにロードするよう求めていることに気付くでしょう。

あなたはbabel-registerを探しています：あなたはバベルが必要とフック経由で使うことができる方法の

一つ。 requireフックはノードのrequireに自身をバインドし、その場で自動的にファイルをコンパイルします。

最初babel-registerを必要とし、あなたのserver.jsファイルが必要です「エントリ」ファイルを作成します。

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

今node server-entry.jsであるためにあなたのNPM devスクリプトを変更します。

______別に

：それが呼び出されているファイルをtranspileすることはできませんbabel-registerとしてエントリファイルを作成する必要があります。たとえば、これは失敗します：// babeljs：

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

export default function() {}