React开发工具之Browserify&Webpack介绍

本文介绍了React开发中的两个重要构建工具Browserify和Webpack。Browserify允许在浏览器中使用Node.js风格的require,而Webpack则是一个更全面的打包工具,支持CSS、图片等资源打包,提供模块代码热替换等功能。文章详细讲述了如何使用这两个工具,包括建立项目、解决遇到的问题和使用watchify自动化打包。最后提到了Webpack与React的结合使用以及基本的开发调试工具。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

构建工具

构建工具帮助你优化重复性的工作使运行代码更加轻松。在React程序中,最具重复性的工作之一就是对所有的React组件运行JSX解释器。我们先了解一下Browserify,之后会详细讲解Webpack。(纯手打,如有拼写错误的地方请留言,谢谢)

Browserify介绍

Browserify是一个JavaScript打包工具,支持在浏览器中使用Node.js风格的require()方法,它会自动将所有的依赖打包到一个文件中,以支持模块在浏览器环境中使用。尽管十分强大,但是Browserify仅支持JavaScript文件。

建立一个Browserify项目

npm init

# ... anser question as necessary to complete init

npm install --save-dev browserify reactify react uglify-js

在package.json文件的末尾增加如下构建脚本:

"devDependencies": {
"browserify": "^16.2.0",
"react": "^16.3.2",
"reactify": "^1.1.1",
"uglify-js": "^3.3.22"
},
"scripts": {
"build": "browserify --debug index.js > bundle.js",
"build-dist": "NODE_ENV=production browserify index.js|uglifyjs -m > bundle.min.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"browserify":{
"transform": ["reactify"]
}

在命令行(CLI)运行 npm run build来执行默认的任务,自己观察目录结构会生成什么。可以先做下面一步。不然会报错,因为没有index.js

对代码做出修改

让我们创建一个名为index.js的React+JSX文件:

var React = require('react');
React.render(<h1>Hello WWW</h1>,document.body);

再增加一个简单的index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WWW</title>
</head>
<body>
This text should not appear in the browser
<script src="bundle.js"></script>
</body>
</html>

现在你的项目结构看起来应该是这样的:

  • index.html
  • index.js
  • node_modules/
  • package.json

运行上面的讲的命令npm run build。然后打开index.html。wow~,发现报错了。

结果发现 React 0.14版本之后将react package拆分成了 react 和 react-dom 两个package。那我们安装一下react-dom

npm install --save-dev react-dom

所以修改index.js为:

var React = require('react');
var ReactDom = require('react-dom');
ReactDom.render(<h1>Hello WWW</h1>,document.body);
watchify

watchify是对Browerify的一个封装,当你改动了文件的时候它会自动帮你重新打包。同时Watchify还使用了缓存来加快重新打包的速度。

npm install --save-dev watchify

把下面这行添加到package.json中的scripts对象中。

"watch": "watchify --debug index.js -o bundle.js"

这样你就不需要运行npm run build,运行npm run watch即可,它能给你带来更流畅的开发体验。你会发现更改index.js会立马更新bundle.js。

Webpack

Webpack和Browserify很像,它也会把你的JavaScript代码打包到一个文件,但是它还能做更多的事情:

  • 将CSS、图片以及其他资源打包到同一个包中
  • 在打包之前对文件进行预处理(less、coffee、jsx)等
  • 根据入口文件的不同把你的包拆分成多个包
  • 支持开发环境的特性标志位
  • 支持模块代码“热”替换
  • 支持异步加载

因此,Webpack能够实现Browserify混合其他构建工具gulp/grunt的功能。

Webpack与React

React帮助你开发应用程序组件。Webpack不仅能帮助你打包所有的JavaScript文件,还自动管理所有依赖。当你移除某个组件的时候,它的所有依赖都会自动被移除。不会有未被使用的CSS或者图片遗留在代码目录中。让我们看看React组件是怎么样加载资源依赖的,请自行创建以下文件:

//logo.js

require('./logo.css');

var React = require('react');

var Logo = React.createClass({
render: function(){
return <img className="LOGO" src={require('./logo.svg')}/>
}
})
module.exports = Logo;
//app.js
var React = require('react');
var ReactDom = require('react-dom');
var Logo = require('./logo.js');

ReactDom.render(<logo/>,document.body);

//webpack.config.js

//webpack.config.js
module.exports = {
mode: 'development',
//程序的入口文件
entry: './app.js',
output: {
//所有打包好的资源的存放位置
path: __dirname+'/public/build',
//使用url-loader的资源前缀
publicPath: './build',
//生成的打包文件名
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js)$/,
use: [
{ loader: "jsx-loader?harmony" }
]
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};

接着安装加载器

npm install webpack webpack-cli

npm install url-loader jsx-loader style-loader css-loader

当所有的准备工作完成后,运行Webpack

"scripts": {
"build": "browserify --debug index.js > bundle.js",
"build-dist": "NODE_ENV=production browserify index.js|uglifyjs -m > bundle.min.js",
"watch": "watchify --debug index.js -o bundle.js",
"webpack": "webpack --watch"
},
在scripts里面添加webpack

npm run webpack

npm run webpack --watch

基本工具

打开Chrome可以安装React Develop Tool扩展。另外还需要设置window.React = require('react');

在调试或头脑风暴时,可以使用在线调试站点:JSFiddle和JSBin。



本文部分内容摘抄自<React引领未来的用户界面开发框架>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值