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

遇到这样一个问题,在一个页面中写了一个react的组件,这是没有问题的,比如:




    
    Document
    
    
    


    

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

//helloworld.js
var HelloWorld = React.createClass({
    render:function(){
        return(

            
hello world
) } }) ReactDOM.render(,document.getElementById("wrap"));

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




    
    Document
    
    
    


    

然后我在chrome浏览器中打开.html文件,浏览器没有显示任何东西。

为什么呢?

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


于是在查看文档时,我发现了这样一句话:
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内容:




    
    引入组件


    

index.js内容:

var React = require("react");
var ReactDOM = require("react-dom");
ReactDOM.render(

HelloWorld

,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.js)