React之,gulp,browserify搭建

来源：互联网发布：赵丽颖为什么能红知乎编辑：程序博客网时间：2024/05/19 19:55

假设已经安装了node.js npm、淘宝镜像cnpm和全局gulp
1、新建一个文件夹 r01（完整路径E:\react\r01，这个路径无所谓）
2、打开node 进入r01文件夹
依次执行这里写图片描述
3、node 执行

cnpm init

这里写图片描述
（注意：main.js为入口js，也可以取其他名称）
然后在r01文件夹下就生成了一个package.json文件
4、node 执行

cnpm install gulp --save-dev

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

cnpm install  babel-core –-save-dev

(–-save-dev是将安装版本写入package.json文件中)
5、新建main.js文件（直接在r01文件夹下新建）
main.js写入

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

再新建一个index.html文件

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

(先不管bundle.js，下文会说)
6、打开package.json文件
将以下代码写入”scripts”中：

"build": "browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js","build-dist": "NODE_ENV=production  browserify  main.js | uglifyjs  -m  >  bundle.min.js",

这里写图片描述
注意：node执行时可以直接执行browserify -t [ babelify –presets [ react ] ] main.js -o bundle.js
或者NODE_ENV=production browserify main.js | uglifyjs -m > bundle.min.js，但是写入package.json中则可以直接运行cnpm run build或者cnpm run build-dist很方便。
“[babelify –preset [react] ]”中的” [ react ] “前后一定都要有空格，否则要出错。
7、此时文件目录为:
index.html
main.js
node_modules
package.json
8、运行npm run build，就会生成bundle.js。
这时的文件目录为:
bundle.js
index.html
index.js
node_modules
package.json
打开index.html文件就可以看到页面了
但是每次改变mian.js都要执行一次cnpm run build才能重新生成bundle.js文件，就变得非常不方便，安装watchify解放你的双手！！
9、node 依次运行安装

cnpm install watchify --save-dev

cnpm install reactify --save-dev

package.json中加上

"browserify" : {    "transform": [        ["reactify", {"es6": true}]    ]}

这里写图片描述
可以直接node运行

watchify main.js -o bundle.js

或者将其写入package.json中
这里写图片描述
node运行cnpm run buildw即可，修改main.js文件，在浏览器中直接刷新index.html即可！！！

阅读全文

0 0