xwp 3 react环境构建 - nuanxin1111/react GitHub Wiki

准备工作

npm install -g babel-cli
npm install -g browserify
npm install -g babelify babel-preset-react babel-preset-es2015

react文件分离部署法-重点

创建一个目录 mkdir test npm init 下载react http://facebook.github.io/react/downloads/react-0.14.2.zip 把解压出来的build目录拿出来放到自己的test项目中，创建测试文件src/main.jsx和index.html

//main.jsx
ReactDOM.render(
  <h1>Hello, world xwp!</h1>,
  document.getElementById('example')
);
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script src="lib/main.js">
    </script>
  </body>
</html>
xwp@X61s:~/workspace/react/test$ tree
.
├── build
│   ├── react-dom.js
│   ├── react-dom.min.js
│   ├── react.js
│   ├── react.min.js
│   ├── react-with-addons.js
│   └── react-with-addons.min.js
├── index.html
├── lib
│   └── main.js
└── src
    └── main.jsx

把jsx风格src/main.jsx，转换为部署时使用的js babel --presets es2015,react src/main.jsx -o lib/main.js 调试时，文件保存，自动转换 babel --presets es2015,react --watch src/main.jsx -o lib/main.js 目录保存,自动转换 babel --presets es2015,react --watch src/ -d lib/

html文件里需要引用react.js和react-dom.js以及刚刚转换好的lib/main.js

当商业部署时，把react.js和react-dom.js换成min版，lib/main.js也预先编译完，放到nginx服务器上。

打包整体部署法

browserify不支持直接打包es2015（es6），所以需要先用babel把es2015的语法转换为es5，再用browserify打包。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
  </head>
  <body>
    <div id="example"></div>
  </body>
  <script src="lib/bunld.js"></script>
</html>

"--save"安装到本项目内，-g安装到全局环境中。--save使用时需要先npm init创建npm管理文件。 npm install --save react react-dom

// main.jsx
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
babel --presets es2015,react src/main.jsx -o lib/main.js
browserify -t babelify --presets react lib/main.js -o lib/bunld.js

bunld.js包含了react.js和react-dom.js以及main.js中的所有东西。此文件较大，不适合多页面部署。

安装测试服务器browsersync

http://www.browsersync.io/

sudo npm install -g browser-sync

browser-sync start --server --files "*.*"

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

当前目录下所有文件发生修改时，浏览器会自动刷新。

或者修改package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "browser-sync start --server --files \"*.*\""
  }, 
   "author": "",
  "license": "MIT"
}

启动服务器,此刻浏览器可以看到输出

npm run dev

-save和save-dev可以省掉你手动修改package.json文件的步骤。

spm install module-name -save 自动把模块和版本号添加到dependencies部分
spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分

至于配置文件区分这俩部分， 是用于区别开发依赖模块和产品依赖模块， 以我见过的情况来看 devDepandencies主要是配置测试框架， 例如jshint、mocha。

⚠️ **GitHub.com Fallback** ⚠️