React开发工具之Browserify&Webpack介绍

最新推荐文章于 2025-06-20 21:54:51 发布

原创最新推荐文章于 2025-06-20 21:54:51 发布 · 649 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #Webpack #前端构建工具

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了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"
  },