从0到1，细说 React 开发搭建那点事
vmzb6791
8年前
<h2>React</h2> <p>本文记录了本人以及目前团队从无到有使用React的过程，我们将从webpack开始说起，一步一步展现React最基本的开发生态。在这里并不会介绍任何jsx或es6相关的语法，只聚焦于如何使用react生态搭建利于团队协作、有利于提升开发效率的开发环境。</p> <h2>脚手架工具——webpack</h2> <p>工欲善必须利其器，想要高效的开发react，必须保证有一个高效有序的开发环境。我们使用的是非死book开源的脚手架工具——webpack来搭建一个完全不依赖服务器的开发环境。实现高效集成、实时编辑可见、动态编译jsx和es6等强悍功能。</p> <h3>添加webpack</h3> <p>webpack最早是非死book的instagram团队研发出的脚手架工具，用于支持前端系统的开发。虽然webpack一直都和react嵌套在一起使用，但是他的使用场景并不局限于react，你可以把他应用于所有的前端开发场景。</p> <p>webpack也是依赖nodejs和npm的，在安装webpack之前务必先安装nodejs的环境，nodejs和npm的安装参看: <a href="/misc/goto?guid=4959725685582839746" rel="nofollow,noindex">https://my.oschina.net/chkui/blog/783879</a> 。可以像下面这样安装一个全局的webpack环境。</p> <pre> <code class="language-javascript">$ npm install webpack -g</code></pre> <p>或者以依赖工程的方式安装</p> <pre> <code class="language-javascript"># 进入项目目录 # 确定已经有 package.json，没有就通过 npm init 创建 # 安装 webpack 依赖 $ npm install webpack --save-dev</code></pre> <h3>测试运行webpack</h3> <p>（本例子的代码存放在： <a href="/misc/goto?guid=4959725685679522537" rel="nofollow,noindex">https://github.com/chkui/webpack-demo</a> 。下载后用 npm install 下载npm依赖即可使用。）</p> <p>Setp1:简单打包</p> <p>首先我们增加一些用于测试元素。先写一个index.html</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="bundle.js"></script> </body> </html></code></pre> <p>然后添加一个entry.js</p> <pre> <code class="language-javascript">/** * Created by chkui on 2016/11/16. */ require("!style!css!./style.css"); document.write('<h1>hello webpack</h1>');</code></pre> <p>然后就可以执行打包命令了：</p> <pre> <code class="language-javascript">$ webpack ./entry.js bundle.js</code></pre> <p>运行以后，就会发现在目录中生成了一个bundle.js文件。浏览器中打开index.html就会看到执行效果。</p> <p>Step2:利用webpack分析工具打包</p> <p>增加一个名为module.js的文件：</p> <pre> <code class="language-javascript">/** * Created by chkui on 2016/11/16. */ module.exports = 'It works from module.js.'</code></pre> <p>在原来的entry.js增加引用：</p> <pre> <code class="language-javascript">/** * Created by chkui on 2016/11/16. */ require("!style!css!./style.css"); document.write('<h1>hello webpack</h1>'); //新增对module.js的引用 document.write(require('./module.js'));</code></pre> <p>然后同样执行webpack打包命令：</p> <pre> <code class="language-javascript">$ webpack ./entry.js bundle.js</code></pre> <p>然后在打开index.html，会发现我们新增加的module.js的内容被正确输出。这是因为我们在页面中通过nodejs的require的方式引入的module.js，而使用webpack打包时会自动在依赖关系中引入module.js。</p> <h3>加载器</h3> <p>webpack提供了一个非常强大的loader功能，这个功能可以用于管理各种依赖关系模块，在webpack中所有的文件都视作一个模块。</p> <p>首先npm导入webpack loader：</p> <pre> <code class="language-javascript">npm install css-loader style-loader</code></pre> <p>添加一个用于测试的style.css文件：</p> <pre> <code class="language-javascript">h1{ color:red; }</code></pre> <p>在entry.js中添加引用：</p> <pre> <code class="language-javascript">/** * Created by chkui on 2016/11/16. */ require("!style!css!./style.css");//添加对css的引用 document.write('<h1>hello webpack</h1>'); document.write(require('./module.js'));</code></pre> <p>使用命令行打包：</p> <pre> <code class="language-javascript">webpack ./entry.js bundle.js --module-bind 'css=style!css'</code></pre> <p>会发现css的样式生效了。可以将繁琐的“!style!css!./style.css”简写成"./style.css"。</p> <h3>使用配置管理</h3> <p>细心的人会发现，我们每次使用命令行打包都带了大量的参数，这样不仅繁琐更不利于规模化使用。webpack同样可以使用标准化配置文件来替代命令行中的各种参数。</p> <p>webpack的配置文件是nodejs的文件，通常命名为 webpack.config.js 。我们在工程中增加配置文件：</p> <pre> <code class="language-javascript">/** * Created by chkui on 2016/11/16. */ module.exports = { entry: './entry.js',//定义要引入的js文件 output: { path: __dirname, filename: 'bundle.js' //定义要输出的js文件 }, module: { loaders: [//定义加载内容 {test: /\.css$/, loader: 'style!css'} ] } }</code></pre> <p>现在，我们在命令行中输入webpack就可以实现和前面一样的打包。</p> <h3>丰富打包输出内容</h3> <p>可以使用：</p> <pre> <code class="language-javascript">webpack --progress --colors</code></pre> <p>命令来丰富打包输出的内容，更容易了解出现的问题。</p> <h3>监听更新模式</h3> <p>在我们进行编码开发的时候，每次对文件的编辑我们都想立即看到编译效果，如果每次编辑都要去打包，会非常麻烦。webpack提供了一个监听模式（类似grunt的watch），用于监听每次对文件的修改，修改后会立即进行增量更新。启用监听模式：</p> <pre> <code class="language-javascript">webpack --progress --colors --watch</code></pre> <p>监听模式使用的是内存增量更新。webpack会将所有需要打包的文件copy到内存，然后监控文件修改，如果文件发生了修改，会将修改的文件替换内存中的对应文件。因此开发完之后，切记进行一次手动打包才能生效。</p> <h3>开发环境模式</h3> <p>webpack更强大的是，他整合了nodejs的express提供了一个静态服务器。（虽然没有官方正式，我觉得webstrom和微信本地开发环境都是整合的nodejs的express）</p> <p>使用了开发环境模式，我们所有的动态修改和操作都可以实时看到效果，并且解决了静态资源各种路径引用的问题。首先npm安装工具：</p> <pre> <code class="language-javascript">npm install webpack-dev-server -g</code></pre> <p>然后使用命令行工具启用开发环境：</p> <pre> <code class="language-javascript">webpack-dev-server --progress --colors</code></pre> <p>webpack的开发环境模式很强悍，比使用--watch更犀利的地方在于可以实现编辑即可见。浏览器立即同步刷新运行。开发环境模式可以延伸到生产环境实现代码同步级别的热部署。</p> <p>开发环境扩展——webstorm的坑</p> <p>由于本人的前端页面使用webstorm开发，在使用过程中发现了一个webstorm的坑。webstorm有文件缓存的功能，在编辑完毕保存之后并不会实时的更新磁盘文件，这样的就导致webpack的开发环境无法同步更新文件。以下是解决方法：</p> <p>1.File->settings->System Settings</p> <p>2.找到弹出框的Use "safe write"，将其勾选解除。</p> <p><img src="https://simg.open-open.com/show/7a4d2135771c5c3852b82df1df2fbcba.png"></p> <h3>输出调试信息</h3> <p>webpack的配置较为复杂，一不小心就会出现错误。它提供了一个输出调试信息的参数：</p> <pre> <code class="language-javascript">$ webpack --display-error-details</code></pre> <p>调试运行webpack命令出错的时候使用。Webpack 中涉及路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, "app/folder") 或 path.join(__dirname, "app", "folder") 的方式来配置，以兼容 Windows 环境。</p> <h3>webpack插件</h3> <p>某些时候，webpack的常规功能无法满足我们的需求，我们可以为webpack开发插件，或者使用其他开发团队已经完成的插件。</p> <p>下面是一个插件的标准格式：</p> <pre> <code class="language-javascript">function MyPlugin(options) { // Configure your plugin with options... } MyPlugin.prototype.apply = function(compiler) { compiler.plugin("compile", function(params) { console.log("The compiler is starting to compile..."); }); compiler.plugin("compilation", function(compilation) { console.log("The compiler is starting a new compilation..."); compilation.plugin("optimize", function() { console.log("The compilation is starting to optimize files..."); }); }); compiler.plugin("emit", function(compilation, callback) { console.log("The compilation is going to emit files..."); callback(); }); }; module.exports = MyPlugin;</code></pre> <p>需要实现什么功能，可以按照这个标准去开发自己的插件。</p> <h2>React开发</h2> <p>使用webpack搭建好开发环境后，我们就可以开始着手开发react了。开始之前，我们还是要优先完成开发环境的配置和搭建。</p> <p>react使用的语法是jsx，现在还新增了对es6的支持。为了可以高效开发，我们需要使用webpack的loader功能，将jsx或es6使用语法糖转义成浏览器可以识别的标准JavaScript语法。</p> <p>下面将继续在前文webpack的基础上继续说明如何开发react。</p> <h3>安装必要的依赖工具</h3> <p>react的基础工具包：</p> <pre> <code class="language-javascript">$ npm install react --save-dev</code></pre> <p>react的dom组件：</p> <pre> <code class="language-javascript">$ npm install react react-dom --save-dev</code></pre> <p>在前面介绍webpack的时候已经介绍了加载器的概念，这里需要额外安装babel用于对react的jsx风格的编码进行解析，babel除了jsx外还可以解析es6等。安装babel：</p> <pre> <code class="language-javascript">$ npm install babel-loader</code></pre> <p>安装babel-loader之后\node_modules目录中会额外多安装一个babel-core，这是babel的核心包。</p> <p>有了babel，我们还需要安装编码转换规则，用于解析jsx、es6等等。</p> <pre> <code class="language-javascript">$ npm install babel-preset-es2015 babel-preset-react --save-dev</code></pre> <p>除了babel提供的es6和jsx，webpack还可以使用各种loader来转换编码，比如coffeescript等。想要什么就去google找吧。</p> <h3>完善本地开发环境命令</h3> <p>前面的案例使用 webpack-dev-server 来热部署本地开发环境提升开发效率。但是每次都靠长长的命令行启动和停止太过于繁琐。我们可以利用npm的package.json配置脚本运行来统一管理脚本命令：</p> <pre> <code class="language-javascript">{ "name": "demo2-react", "version": "1.0.0", "description": "react demo", "main": "index.js", "scripts":{ "dev": "webpack-dev-server --progress --colors --inline" //配置运行命令 }, //more }</code></pre> <p>添加了scripts后，我们今后只需要运行</p> <pre> <code class="language-javascript">$ npm run dev</code></pre> <p>即可使用配置好的命令行参数启动本地开发环境服务器。</p> <h3>终于可以开始码农的核心工作了</h3> <p>（demo代码存放在： <a href="/misc/goto?guid=4959725685759712855" rel="nofollow,noindex">https://github.com/chkui/react-demo</a> 。下载后用 npm install 下载npm依赖即可使用）</p> <p>前面准备了这么久，就是为了随后我们可以快乐的编码。首先我们按照下面这个结构创建工程结构：</p> <pre> <code class="language-javascript">/root --/dev ----/js ------/index --------/comps ----------component1.jsx ----------main.jsx --------index.js ----/style ------/index --------index.css ----index.html</code></pre> <p>然后根据工程的结构修改我们的webpack.config.js：</p> <pre> <code class="language-javascript">/** * Created by Administrator on 2016/11/17. */ var path = require('path'); module.exports = { entry: ['./dev/js/index/comps/main.jsx'],//定义要引入的js文件 output: { path: __dirname, filename: './dev/js/index/index.js' //定义要输出的js文件 }, module: { loaders: [{ test: /\.js[x]?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015','react'] } }, { test: /\.css$/, loader: 'style!css' }, { test: /\.(png|jpg)$/, loader: 'url?limit=25000' //只解析小于25000字节的图片 }] } };</code></pre> <p>和前面介绍webpack的例子相比，这里的配置文件新增了了一个babel-loader的配置。</p> <p>test后的正则表达式表示对所有的js或者jsx文件进行解析；</p> <p>exclude表示不解析npm安装目录下和bower安装目录下的文件；</p> <p>loader表示使用的解析工具；</p> <p>query表示扩展参数，这里的'es2015'和'react'表示启用babel-preset-es2015和bable-preset-react解析规则。这里需要注意的是解析的优先级的倒序的，即会先解析‘react’。</p> <p>然后我们添加编码内容（所有的例子都分别实现了jsx规范和es2015规范）：</p> <p>index.html：</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="comp"></div> <script src="/dev/js/index/index.js"></script> </body> </html></code></pre> <p>main.jsx：</p> <pre> <code class="language-javascript">/** * Created by chkui on 2016/11/17. */ //jsx /* var React = require('react'); var ReactDOM = require('react-dom'); var Comp1 = require('./component1.jsx'); require('../../../style/index/index.css'); ReactDOM.render( <div className="main"> react jsx demo: <Comp1 /> </div>, document.getElementById('comp') ); */ //es2015 import React from 'react'; import ReactDOM from 'react-dom'; import Comp1 from './component1.jsx' /*切记，大写是变量小写是标签*/ import style from '../../../style/index/index.css' ReactDOM.render( <div className="main"> react es2015 demo: <Comp1 /> </div> , document.getElementById('comp') );</code></pre> <p>component1.jsx：</p> <pre> <code class="language-javascript">/** * Created by Administrator on 2016/11/17. */ //jsx /* var React = require('react'); var comp1 = React.createClass({ render: function () { return ( <div className = "index"> hello react! </div> ); } }); module.exports = comp1; */ //es6 import React from "react" class Comp1 extends React.Component{ //构造函数 constructor(...args){ super(...args); } //覆盖父类的渲染方法 render() { return ( <div className = "index"> hello react! </div> ); } } export default Comp1;</code></pre> <p>编码完毕之后，我们使用我们设定好的脚本运行我们的本地开发环境：</p> <pre> <code class="language-javascript">$ npm run dev</code></pre> <p>启动时，所有的文本都会被读取到内存中，我们可以根据输出来聊天到底添加了哪些依赖的文件。启动完成后，浏览器上输入 http://localhost:8080/dev/index.html 或 http://localhost:8080/webpack-dev-server/dev/index.html 即可看到我们用react开发的页面。此时修改js或css文件，编辑效果都会立刻呈现在浏览器上。</p> <h2>React浏览器调试工具</h2> <p>非死book提供了基于chrome的页面调试工具，可以看到所有react组件及其效果。</p> <p>工具安装：</p> <ol> <li>首先最重要的是——KX上网-_-。不KX上网chrome的网上商店就别想了。</li> <li>然后在chrome网店搜索“React Developer Tool”。</li> <li>找到后添加到chrome。</li> </ol> <p>添加完成后可以发现在chrome中增加了react的图标。</p> <p><img src="https://simg.open-open.com/show/0f3091518d6a40ed8e8e3e9524cd22a9.png"></p> <p>然后在demo页面按F12打开开发人员工具，会发现多了一个React栏目。选择这个栏目后，会显示出React组件的效果。</p> <p><img src="https://simg.open-open.com/show/4aa309dea1cebfcb4fdeef190e7ad8d5.png"></p> <p> </p> <p>来自：https://my.oschina.net/chkui/blog/789871</p> <p> </p>