外部引入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文件就可以看到页面了.