外部引入react组件说编译,说browserify

遇到这样一个问题，在一个页面中写了一个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">
        ReactDOM.render(<div>Helloworld</div>,document.getElementById("wrap"));
    </script>
</body>
</html>

但我想在十个页面需要引用它，对于有多个页面要引用它，在每个页面中重复写是一个不明智的做法。
于是我就建立了一个文件命名为：helloworld.js文件，里面的代码为：

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

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

然后在引用它的页面中我这样写：

<!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文件，浏览器没有显示任何东西。

为什么呢？

然后分析我步骤
首先从外部引入的.js是需要编译的。
我这里在浏览器中已经引入了的babel编译库(如下)，在浏览器中可以编译。所以我这里是没有问题的。

<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 HTTP

哦，问题出在chrome浏览器，然后我果断试验了Firefox和Safari是没有问题的

那么对于chrome浏览器怎么办呢？我这里提供两种解决方案:

第一种:线下编译,参照官方的文档,链接如下
https://facebook.github.io/react/docs/getting-started.html#offline-transform

第二种:
这时就可以用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文件就可以看到页面了.

外部引入react组件说编译,说browserify

相关推荐