06、React系列之--使用browserify管理

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管理

1、使用browserify管理react

2、创建项目

3、解放你手动转化bundle.js

相关推荐