無法設置React/Babel/Webpack

所以我試圖設置React/Babel/Webpack環境，但是我在這樣做時遇到了一些麻煩。我開始創建一個新的文件夾，做了npm init，然後我跟着本教程的一切：https://facebook.github.io/react/docs/package-management.html 無法設置React/Babel/Webpack

首先，我已經安裝的WebPack全球
我創建了一個index.js與本教程的內容相同
我創建了一個.babelrc文件，{ "presets": ["react"] }
冉npm install --save react react-dom babel-preset-react babel-loader babel-core

然後，W當我運行命令webpack main.js bundle.js --module-bind 'js=babel-loader'它給了我一個錯誤：「模塊解析失敗〜你可能需要一個合適的加載器來處理這種文件類型。

任何想法的傢伙？我從字面上複製並粘貼了教程中的每一步，我確信所有文件都是正確的。感謝您的建議！

來源

2016-04-30 GBarroso

這應該工作，請確保安裝的一切嗎？ –

這個問題似乎是JSX代碼，當我切斷它時命令起作用。但它看起來像一切都很好。我怎樣才能確保一切安裝？ – GBarroso

有'node_modules'文件夾，檢查是否安裝了所有東西。嘗試： 'webpack main.js bundle.js --module-bind'js = babel'' –

創建文件webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: './main.js', 
    output: { path: __dirname, filename: 'bundle.js' }, 
    module: { 
    loaders: [{ 
     test: /.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/ 
    }] 
    }, 
};

運行

webpack

，它會產生bundle.js爲您服務。

現在確保您已經添加index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
    </head> 
<body> 
    <div id="example"></div> 
    <script src="bundle.js"></script> 
</body> 
</html>

來源

2016-04-30 03:44:54

這種方式工作。非常感謝你！ – GBarroso

看起來像你從全球訪問webpack。你可能會做

npm install -g webpack

現在，安裝的WebPack本地已經安裝的WebPack，

npm install webpack

和運行。

./node_modules/webpack/bin/webpack.js main.js bundle.js --module-bind 'js=babel-loader'

來源

2016-04-30 03:00:59

完成它，但它是說，點不被識別爲內部或外部命令。 – GBarroso

而你在Windows或Linux？好的。然後最後做'npm -g webpack'並運行'webpack main.js bundle.js --module-bind'js = babel-loader'' –

我在windows上。 'npm -g webpack'不是命令，你的意思是'npm install -g webpack'嗎？仍然得到模塊解析器錯誤 – GBarroso

無法設置React/Babel/Webpack

回答

相關問題