JS 模块化的发展史(四)

127 阅读2分钟

「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」。

模块化的辉煌

Browserify

在经历了种种发展后,模块化迎来了新的角色,browserify 它的简介为:你可以做任何事,而且你只需要写 CommonJS Code ,以下为基本使用示例。

//安装
$ npm install -g browserify
//使用
$ browserify main.js -o bundle.js

但是因为 browserify 使用并不方便:

  1. 需要解析 AST 以遍历项目的整个依赖关系图。
  2. 需要依靠 watchify 实现自动编译。
  1. 需要依靠 Source Map 实现调试。

Webpack

因为 browserify 的使用繁琐,出现了一位新的打包工具 "Webpack"( Module Bundler) , 意为模块打包机,它可以对任何资源进行打包,捆绑。

Webpack 拥有极其强大的扩展性和实用性,通过配置,他可以满足多种需求的项目打包构建,而且操作的命令行简洁易配。

它拥有以下特性:

  1. 兼容性方面( CommonJS,AMD,ES6...)。
  2. 代码拆分。
  1. 加载器与插件(极大的扩展性)。
  2. 开发工具和工作流程。

基本使用示例:

// webpack.config.js
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }{,
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }}
}

小结:以上配置项,配置了entry入口文件,output输出位置,loader加载器。其中 loader 不仅仅是用来处理 js 文件的,还有处理 css 文件,ts 文件,等等,极大的丰富了 webpack 的实用性。

多种 loader 示例

var webpackConfig = {
    module: {
        loaders: [{
            test: /.scss$/,
            loaders: 'style!css!sass'
        }, {
            test: /.(png|jpg|svg)$/,
            loader: 'url?limit=20480' //20k
        }]
    }}
}

以上加入了处理 scss 文件的 loader 和 处理图片的 loader ,以此扩展 webpack 的处理文件能力。

使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

ProgressPlugin 用于自定义编译过程中的进度报告,HtmlWebpackPlugin 将生成一个 HTML 文件,并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。

构建依赖图谱

我们通过上面多种模块化工具的发展史,我们知道如何构建依赖图,是模块化的重点,在 Webpack 中,万物皆可 require(),通过 require 可以相互引入依赖。对所有的模块都是一视同仁,是一个通用的模块系统。

// CSS
require('./style.less');
require('./style.scss');

// js and ts
var myModule = require('./myModule.js');
var myTypedModule = require('./myTypedModule.ts');

小结:

Webpack 统治了很长一段时间,需要学习的内容还有很多,这里只是基础介绍一下,想要详细了解的可以点击这里