ReactJS - 無法在不提供HTTP文件的情況下運行babel代碼

我是reactjs的新手，並試圖安裝babel以運行babel code而不提供HTTP文件。通過遵循Package Manager我已經安裝了它browserify爲：ReactJS - 無法在不提供HTTP文件的情況下運行babel代碼

$ npm install --save react react-dom babelify babel-preset-react 
$ browserify -t [ babelify ] main.js -o bundle.js

它後，我創建的文件.babelrc在相同的根目錄與下面的代碼

{ "presets": ["react"] }

並刪除了HTTP babel-core源文件：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>React Tutorial</title> 
    <script src="build/react.js"></script> 
    <script src="build/react-dom.js"></script> 
    <!-- removed https://npmcdn.com/[email protected]/browser.min.js --> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/babel"> 
     ReactDOM.render(
     <h1>Hello, world!</h1>, 
     document.getElementById('content') 
    ); 
    </script> 
    </body> 
</html>

但是當我從訪問它時，這是行不通的。

來源

2016-08-11 Syed Aqeel

您沒有包含失敗的代碼或錯誤消息，所以這是一個猜測。

的問題是，當你運行browserify，它transpiles（轉換）從ES2015指定爲純老的Javascript代碼。所以，當你這樣做：

browserify -t [ babelify ] main.js -o bundle.js

你轉換代碼main.js並將其寫入bundle.js。

因此，有兩個問題與您的代碼：

你永遠不包含在HTML文件中bundle.js。您需要添加<script src="build/bundle.js"></script>以加載您編譯的代碼。
您的HTML <script>塊中的代碼未被browserify所觸及。構建步驟（運行browserify）正在處理腳本，而不是HTML文件。因此，當瀏覽器嘗試執行代碼時，代碼永遠不會被轉譯並失敗。

當你包括在HTML babel-core它工作的原因是因爲巴貝爾有一個特殊的「活」 transpilation模式時，頁面加載，這將transpile你的代碼，這種模式確實存在於<script>獲取代碼因爲它全部在用戶的瀏覽器上運行。

來源

2016-08-11 13:48:45 Kryten

所以你的意思是我應該包含'bundle.js'文件並將'babel腳本'放在'main.js'中以便在不提供HTTP文件的情況下運行'babel code'？ –

ReactJS - 無法在不提供HTTP文件的情況下運行babel代碼

回答

相關問題