代码改变世界

08.ElementUI 2.X 源码学习:源码剖析之工程化(三)

2021-06-08 11:27  Anduril  阅读(207)  评论(0编辑  收藏  举报

0x.00 📢 前言

👇 项目工程化系列文章链接如下,推荐按照顺序阅读文章 👇。

1️⃣ 源码剖析之工程化(一):项目概览、package.json、npm script
2️⃣ 源码剖析之工程化(二):项目构建、MD解析
3️⃣ 源码剖析之工程化(三):打包配置

本系列文章主要通过解析element项目源码,从结构、功能、源码方面逐一解析,学习其模块化、组件化、规范化、自动化等多维度优秀实践。主要内容包含项目结构、npm script、项目构建、文档解析、打包配置、发布部署等。

本文是第三篇,介绍项目的打包配置功能。

0x.01 📦 打包配置

🚨 项目中 webpack 版本为 4.X,文中涉及语法、功能与最新版本5.X相比存在变化。

📝 commonjs vs commonjs2

接下来配置 libraryTarget的选项中可以看到'commonjs'、'commonjs2'。两者之前的有什么区别?

commonjs 规范只定义了exports, 而 module.exportsnodejscommonjs的实现, 这种扩展实现称为commonjs2

// commonjs
exports.a = 'a';
exports.b = 'b';

// commonjs2
module.exports = {
    a : 'a',
    b : 'b'
};

参考https://github.com/webpack/webpack/issues/1114

build/config.js

文件内容是打包配置的公用配置。

carbon (40).png

外部扩展(externals) 从输出的 bundle 中排除依赖,在运行时(runtime)从外部获取这些扩展依赖(external dependencies),主要解决组件依赖导致代码冗余问题。其中 exports.externals = externals; 内容格式如下 👇。

carbon (41).png

build/webpack.common.js

commonjs2 规范打包构建类库。

  • 调用命令:webpack --config build/webpack.common.js
  • 入口文件:src/index.js
  • 输出文件:以commonjs2规范构建输出到lib/element-ui.common.js(类库主入口文件)。

image.png

build/webpack.component.js

commonjs2 规范对每个组件单独打包构建,支持按需引入。

  • 调用命令:webpack --config build/webpack.component.js
  • 入口文件:components.json中的组件列表。
  • 输出文件:把packages目录下的组件,以commonjs2规范单独构建输出到lib/components-name.js

image.png

build/webpack.conf.js

umd 规范打包构建类库,不仅可以 NodeJs 环境使用,也可以在浏览器环境(browser)使用,需要设置umdNamedDefine: true

  • 调用命令:webpack --config build/webpack.conf.js
  • 入口文件:src/index.js
  • 输出文件:以umd规范构建输出到lib/index.js

image.png

externals 配置

通过这种方式引入的依赖库,不会打包到 bundle 中。以下任何一种形式在各种模块上下文使用:

  • root:可以通过一个全局变量访问 library(例如,通过 script 标签)。
  • commonjs:可以将 library 作为一个 CommonJS 模块访问。
  • commonjs2:和上面的类似,但导出的是 module.exports.default。
  • amd:类似于 commonjs,但使用 AMD 模块系统。

一个形如 { root, amd, commonjs, ... } 的对象仅允许用 libraryTarget: 'umd' 这样的配置.

  // 防止将某些 import 的包(package)打包到 bundle 中,
  // 在运行时(runtime)再去从外部获取这些扩展依赖
  externals: {
    // config.vue
    // {
    //   root: 'Vue',
    //   commonjs: 'vue',
    //   commonjs2: 'vue',
    //   amd: 'vue'
    // }
    vue: config.vue
  },

生成lib\index.js中,依赖库vue引入声明代码如下:

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("vue"));
	else if(typeof define === 'function' && define.amd)
		define("ELEMENT", ["vue"], factory);
	else if(typeof exports === 'object')
		exports["ELEMENT"] = factory(require("vue"));
	else
		root["ELEMENT"] = factory(root["Vue"]);
})

build/webpack.demo.js

提供了两套打包配置,生产模式用于项目网站的构建,开发模式用于组件展示测试的构建。使用了CSS、JS构建的优化插件,还配置 splitChunks抽取公共模块解决重复引入第三方库的问题。

npm run deploy:build 命令打包构建项目网站。

  • 调用命令:webpack --config build/webpack.demo.js
  • 模式:production
  • 入口文件:examples/entry.js
  • 输出文件:构建内容输出至examples/element-ui/目录下。

npm run deploy:build 命令打包运行项目网站,用于开发调试。

  • 调用命令:webpack-dev-server --config build/webpack.demo.js
  • 模式:development
  • 入口文件:examples/entry.js
  • 输出文件:构建内容输出至examples/element-ui/目录下。

npm run dev:play 命令用于组件库开发中的功能展示。

  • 调用命令:webpack-dev-server --config build/webpack.demo.js
  • 模式:development
  • 入口文件:examples/entry.js
  • 输出文件:构建内容输出至examples/element-ui/目录下。

carbon (37).png

build/webpack.extension.js

用于构建名为Element Theme Roller的 chorme 插件项目,复用大部分 webpack.demo.js 打包配置。npm run deploy:extension用于项目生产发布;npm run dev:extension用于开发调试。

  • 调用命令:webpack --config build/webpack.extension.js
  • 入口文件:examples/extension/src/background.jsexamples/extension/src/entry.js
  • 输出文件:构建内容输出至examples/extension/dist目录下。生成文件 background.js entry.js ,复制文件 icon.png manifest.json

image.png

🚧 build/webpack.test.js

项目未使用此打包配置,入口src/index.js,打包构建文件dist/app.js,具体作用未知。

0x.02 🔖 链接汇总

点击以下链接,可以快速查看本系列其他文章:

ElementUI源码学习:从零开始搭建Vue组件库汇总

0x.03 📚 参考

https://webpack.docschina.org/configuration/

作者:Anduril

简书传送门:简书/Anduril

掘金传送门:掘金/Andurils

个人小站:anduril.cn

技术只有不沉浸其中才能对其更加公正看待! 没了狂热和浮躁,去体会下开源下的语法魅力!这里没有技术宗教的狂热和鄙夷,没有疯狂的个人崇拜,只是一个技术人探索之路上对于美丽与丑陋的随笔和感悟!

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。