外部引入react組件說編譯,說browserify

時間 2019-11-10

標籤外部引入 react 組件編譯 browserify 欄目 React 简体版

原文原文鏈接

遇到這樣一個問題，在一個頁面中寫了一個react的組件，這是沒有問題的，好比:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/react.min.js"></script>
    <script src="js/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
    <div id="wrap"></div>
    <script type="text/babel">
        ReactDOM.render(<div>Helloworld</div>,document.getElementById("wrap"));
    </script>
</body>
</html>

但我想在十個頁面須要引用它，對於有多個頁面要引用它，在每一個頁面中重複寫是一個不明智的作法。
因而我就創建了一個文件命名爲：helloworld.js文件，裏面的代碼爲：node

//helloworld.js
var HelloWorld = React.createClass({
    render:function(){
        return( 
            <div>hello world</div>
        )
    }
})

ReactDOM.render(<HelloWorld />,document.getElementById("wrap"));

而後在引用它的頁面中我這樣寫：react

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/react.min.js"></script>
    <script src="js/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
    <div id="wrap"></div>
    <script type="text/babel" src="helloworld.js"></script>
</body>
</html>

而後我在chrome瀏覽器中打開.html文件，瀏覽器沒有顯示任何東西。webpack

爲何呢？git

而後分析我步驟
首先從外部引入的.js是須要編譯的。
我這裏在瀏覽器中已經引入了的babel編譯庫(以下)，在瀏覽器中能夠編譯。因此我這裏是沒有問題的。github

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

因而在查看文檔時，我發現了這樣一句話:
Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTPweb

哦，問題出在chrome瀏覽器，而後我果斷試驗了Firefox和Safari是沒有問題的ajax

那麼對於chrome瀏覽器怎麼辦呢？我這裏提供兩種解決方案:chrome

第一種:線下編譯,參照官方的文檔,連接以下
https://facebook.github.io/react/docs/getting-started.html#offline-transformnpm

第二種:
這時就能夠用browserify或者webpack了，我這裏只介紹browserify的使用

這裏使用browserify
Browserify是一個JavaScript打包工具，支持在瀏覽器中使用Node.js風格的require()的方法，Browserify會自動將全部的依賴打包到一個文件中，一支持模塊在瀏覽器環境中使用，任何包含require語句的JavaScript文件運行Browserify都會自動打包全部的依賴項。

儘管十分強大，但Browserify僅支持JavaScript文件，不像Bower,Webpack或者其餘打包工具支持多種文件格式。

想要Browserify良好的運行起來，必須初始化一個node項目，假設已經安裝了node和npm，你能夠經過終端運行下面的命令來初始化一個項目。這個命令會建立一個含有必要資源的package.json文件。

npm init
npm install  –save-dev  browserify  react react-dom babelify babel-preset-react  uglify-js

在package.json文件的末尾增長以下構建腳本,這裏有一點必定要注意：

「[babelify --preset [react] ]」中"[react]"先後必定都要有空格，不然要出錯

…
    「scripts」:{
        「build」:」browserify -t [babelify --preset [react]] index.js -o bundle.js」,
        「build-dist」:」NODE_ENV=production  browserify  index.js | uglifyjs  -m  >  bundle.min.js」
    }

下一步,新建文件:index.html index.js

index.html內容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入組件</title>
</head>
<body>
    <div id="wrap"></div>
    <script src="bundle.js"></script>
</body>
</html>

index.js內容:

var React = require("react");
var ReactDOM = require("react-dom");
ReactDOM.render(<h1>HelloWorld</h1>,document.getElementById("wrap"));

此時文件目錄爲:
index.html
index.js
node_modules
package.json

而後直接在命令行中輸入npm run build,就會生成bundle.js.

這時的文件目錄爲:
bundle.js
index.html
index.js
node_modules
package.json

打開index.html文件就能夠看到頁面了.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。