06、React系列之--使用browserify管理
来源:互联网 发布:易语言网络爬虫 编辑:程序博客网 时间:2024/05/19 19:58
1、使用browserify管理react
在永不过时的Hello world中我们介绍了一些创建工具,可我们在那一节并没有使用任何的创建工具,只是简单的使用最原始的办法来编写React,基本上代码都在Html当中编写,这一节中我们介绍browserify来管理js代码
(1)、什么是browserify
Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库
(2)、browserify的安装
在我们使用npm来安装
npm install -g browserify
note:具体的方式我们可以参考官网
2、创建项目
1、第一步,我们创建一个props的文件夹
2、cd到props中执行npm init
在执行npm init过程中如果不知道package.json中要输入什么,就直接一路回车健就好了。
这样会在props文件夹中创建一个package.json文件,此我们就可以使用npm来管理此项目了。
3、安装react react-dom bable等
npm install --save react react-dom babel-preset-react babel-loader babel-core
bable作用就是把jsx转化成javascript的
4、在props目录中新建.babelrc文件(一定要记得,否则不会转化jsx),在其中输入
{ "presets": ["react"] }
5、新建一个index.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> </head> <body> <div id="example"></div> <script src="bundle.js"></script> </body></html>
至于bundle.js是什么我们暂时不用管,后面会说到
6、新建一个index.js
var React = require('react');var ReactDOM = require('react-dom');ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));
7、将index.js转化成bundle.js
browserify -t [ babelify ] index.js -o bundle.js
上面index.html中引用的bundle.js就是这样来的
此处注意,如果没有进行第4步,那么转化会出现以下问题,不能转化jsx语法
8、如果以上执行成功,那么就会在props目录中看到bundle.js文件
我们大概看看bundle.js文件吧
我们看到budle里面就是把JSX语法转化成标准的React语法了
到此我们就完成了browserify使用,还是非常容易的,我们不用在html引入react react-dom等js,我们通过npm下载到本地了,直接require进来就好
3、解放你手动转化bundle.js
虽然我们使用browserify管理了js但是有一个问题不知道大家有没有考虑到,就是每次我改变一下index.js都要执行转化成bundle.js语句,这样是不是太麻烦了,做为一个有思想的程序员,这也太扯了,那么能不能我改变一下index.js就自动执行转化语句呢,答案是肯定的我们需要安装一个三方类库watchify(其实就是把browserify封装了一把)
我们全局安装
npm install -g watchify
那么如何使用呢和browserify一样直接使用
watchify index.js -o bundle.js
我们在命令行中输入以上命令会有问题,我们还需要以下步骤
1、要安装reactify,
npm install --save reactify
2、package.json在其中加上
"browserify" : { "transform": [ ["reactify"] ]}
如果你使用的是ES6的语法,只需要在只需要在reactify的配置中加上{“es6”: true}即可将ES6的语法转化成普通的js
"browserify" : { "transform": [ ["reactify", {"es6": true}] ]}
完成以上步骤以后,我们在命令行输入
watchify index.js -o bundle.js
不管我们杂样改变改变index.js都会自动转化成bundle.js,此时我们要需要刷新页面即可看到效果(我们也可以解放F5/commod+R,以后再说)
我们来看看结果
这一节我们介绍了使用browserify来管理js,到此结束
- 06、React系列之--使用browserify管理
- React之,gulp,browserify搭建
- 07、React系列之--使用jspm管理
- 08、React系列之--使用webpack管理
- 使用gulp+Browserify构建React应用
- browserify 使用
- browserify使用简介
- Browserify
- browserify
- browserify
- Browserify
- 09、React系列之--使用yarn包管理工具
- 深入浅出React之第三章:使用redux管理应用状态
- AngularJS - 使用RequireJS还是Browserify?
- React Native系列之-React.js介绍
- React Native系列之-React.js入门
- 01、React系列之--React简介
- React ---- 状态管理之React-Redux
- Big Data课程总结 ( 1 )
- 05、React系列之--永不过时的Hello world
- day57_电力项目_图形报表&项目分析
- python datetime.timedelta对象
- 机器学习12-支持向量机的数学上定义
- 06、React系列之--使用browserify管理
- I/O流
- 腾讯小白作业4.16.html
- 二叉树的最大深度
- C++ vector
- android DialogFragment添加动画
- 投掷硬币
- 二分图判断
- Spark2.X 原码分析 ---- Rpc初探