如何將ES6節點和jsx代碼編譯爲ES5 vanilla JS

我有一個項目在使用babel-node運行服務器的dev中正常工作。如何將ES6節點和jsx代碼編譯爲ES5 vanilla JS

但嘗試2天后，我無法將其編譯爲ES5。

我試着運行babel，但那不包括依賴關係。我想只是爲服務器創建的WebPack配置，但目前我堅持的錯誤：

fs.js:634 
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); 
      ^
Error: ENOENT: no such file or directory, open '/types/mime.types'

使用服務器的配置的WebPack IM幾乎等同於我使用的一個編譯我的客戶端代碼[其中工程100％]：

var webpack = require('webpack'); 
var path = require('path'); 
var WebpackNotifierPlugin = require('webpack-notifier'); 

var BUILD_DIR = path.resolve(__dirname, 'static'); 
var APP_DIR = path.resolve(__dirname, 'src'); 
var DATA_DIR = path.resolve(__dirname, 'json'); 

module.exports = { 
    target: "node", 
    devtool: 'source-map', 
    // This will be our app's entry point (webpack will look for it in the 'src' directory due to the modulesDirectory setting below). Feel free to change as desired. 
    entry: [ 
    APP_DIR + '/server.js', 
    ], 
    // Output the bundled JS to dist/app.js 
    output: { 
    path: BUILD_DIR, 
    filename: 'prod-server.js', 
    }, 
    node: { 
     fs: "empty", 
     net: "empty" 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jsx?$/, loaders: ['babel'], include: APP_DIR }, 
     { test: /\.json$/, loaders: ["json-loader"] } 
    ] 
    }, 
    plugins: [ 
    // Set up the notifier plugin - you can remove this (or set alwaysNotify false) if desired 
    new WebpackNotifierPlugin({ alwaysNotify: true }), 
    ] 
};

如果巴貝爾節點以及運行的東西順利，必須有編譯服務器ES5該節點可以運行一個簡單的方法。

編輯：錯誤的完整堆棧跟蹤：

fs.js:634 
    return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); 
       ^

Error: ENOENT: no such file or directory, open '/types/mime.types' 
    at Error (native) 
    at Object.fs.openSync (fs.js:634:18) 
    at Object.fs.readFileSync (fs.js:502:33) 
    at a.load (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:505) 
    at Object.<anonymous> (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:934) 
    at Object.<anonymous> (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:210:1129) 
    at t (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:169) 
    at Object.e.exports (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:29:2855) 
    at t (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:169) 
    at Object.n (/Users/funk/Development/Projects/jayeh_2015/static/prod-server.js:1:7248)

來源

2016-10-19 Jason McCarrell

是否有更多的堆棧跟蹤該錯誤？ – loganfsmyth

你打賭。我將編輯問題並將其添加到底部。 –

按照http://stackoverflow.com/questions/31102035/how-can-i-use-webpack-with-express 我改變了我的webpack配置，並得到了一個不同的錯誤，這可能是進步？它比第一個更有價值：「return binding.stat（pathModule._makeLong（path））;沒有這樣的文件或目錄，stat'/favicon.ico'」它讓我覺得這個'pathModule._makeLong'isn'使路徑長......所以節點正在錯誤的地方尋找這些文件。 –

要編譯節點代碼，需要對webpack進行一些配置調整。首先，我需要將我的服務器放在node_modules之上的目錄中，即。在我的src文件夾中，而不是根項目目錄。

爲了得到我需要添加如下代碼，我發現@How can I use webpack with express?過去的MIME類型錯誤：

var nodeModules = {}; 
fs.readdirSync(path.resolve(__dirname, 'node_modules')) 
    .filter(x => ['.bin'].indexOf(x) === -1) 
    .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });

然後將所有需要的額外的configs（也見https://github.com/webpack/webpack/issues/1599%22）：

target: "node", 
externals: nodeModules, 
node: { 
    fs: "empty", 
    net: "empty", 
    __dirname: false, 
    __filename: false, 
}

我還是比較喜歡簡單的babel-cli解決方案，但是這很有效。

來源

2016-10-19 02:53:00

謹慎使用此解決方案，如果您有私人組織軟件包將不包含在內，就像在node_modules/@ organization/packageName中存儲一樣您可以在readdirSync之後立即將它們「手動」添加。用 'nodeModules ['@ myorg/mypackage'] ='commonjs mypackage'' – alfonsodev

您可以使用巴貝爾-CLI編譯它。你必須安裝預設的es2015並作出反應，以便babel知道如何編譯它。並設置.babelrc文件

請參閱https://babeljs.io/docs/usage/cli/和https://babeljs.io/docs/setup/（選擇cli）以獲取更多詳細信息。

來源

2016-10-19 01:07:20

一樣簡單謝謝，但這顯然是我做的第一件事。簡單地運行babel只會爲服務器創建一個小文件，並且不會跟蹤任何導入，然後當我運行輸出的文件時，它說它無法找到我導入的第一個模塊文件。 –

這是Node的更加標準的Babel方法，但通常你會將所有的代碼放在'src'目錄並編譯整個目錄。正如你所說，巴別不遵循進口。 – loganfsmyth

如何將ES6節點和jsx代碼編譯爲ES5 vanilla JS

回答

相關問題