如何設置的WebPack在節點

Question

我使用的WebPack用於捆綁客戶端和服務器代碼支持ES6模塊，所以我webpack.config.js樣子：

module.exports = [ 
    { /* client config */ }, 
    { /* server config */ }, 
]; 

我想寫的都和transpile ES6（模塊）代碼到ES5使用Babel。

對於客戶端，這可以用babel-loader完成：在此基礎上

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: { 
    presets: [ 
     'react', 
     [ 
     'env', 
     { 
      targets: { 
      'browsers': 'last 2 versions', 
      }, 
     }, 
     ], 
    ], 
    }, 
} 

，我寫了巴貝爾裝載機服務器：

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: { 
    presets: [ 
     'react', 
     [ 
     'env', 
     { 
      targets: { 
      'node': 'current', 
      }, 
     }, 
     ], 
    ], 
    }, 
} 

Something tells me that babel-loader will never work for this purpose.

後跑webpack，束正確定位但服務器入口點（server.js）沒有正確傳輸：

SyntaxError: Unexpected token import

一般來說，當我們想transpile節點的代碼，我們將使用babel-cli封裝，package.json添加腳本：

"scripts": { 
    "build": "babel src -d dist" 
} 

和手動：

npm run build

我的問題是：如何在webpack.config.js內部設置Babel for Node的ES6轉發？

---

+獎金

webpack.config.js

const path = require('path'); 

const babelRcClient = { 
    presets: [ 
    'react', 
    [ 
     'env', 
     { 
     targets: { 
      'browsers': 'last 2 versions', 
     }, 
     }, 
    ], 
    ], 
}; 
const babelRcServer = { 
    presets: [ 
    'react', 
    [ 
     'env', 
     { 
     targets: { 
      'node': 'current', 
     }, 
     }, 
    ], 
    ], 
}; 

const babelLoaderClient = { 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: babelRcClient, 
}; 
const babelLoaderServer = { 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: babelRcServer, 
}; 

module.exports = [ 
    { 
    context: __dirname, 
    entry: './shared/index.js', 
    output: { 
     path: path.resolve(__dirname, './static'), 
     filename: 'bundle.js', 
    }, 
    module: { 
     loaders: [ 
     babelLoaderClient, 
     ], 
    }, 
    plugins: [], 
    }, 
    { 
    context: __dirname, 
    entry: './server/server.js', 
    target: 'node', 
    output: { 
     path: path.resolve(__dirname, './build'), 
     filename: 'server.js', 
     libraryTarget: 'commonjs', 
    }, 
    externals: [ /^(?!\.|\/).+/i, ], 
    module: { 
     loaders: [ 
     babelLoaderServer, 
     ], 
    }, 
    plugins: [], 
    }, 
] 

Answer 1

通過指定

targets: { 
    'node': 'current', 
} 

你告訴babel到transpile你的代碼node的版本，您使用的是transpile代碼。

是否使用對生產的同一節點的版本？

嘗試指定數字node版本，例如6.11.2然後運行轉碼。

你可以做的另一件事就是告訴巴貝爾留在ES6方式ES6模塊，並且不設置與commonjs方法（這是默認值）替換爲：

targets: { 
    'node': ..., 
}, 
modules: false 

Answer 2

這件事爲我工作。嘗試並檢查一次。

   { 
        test: /\.(js|jsx)$/, 
        include: [].concat(
         path.resolve('./app') //path to your application 
        ), 
        use: ['babel-loader'] 
       }