0x.00 📢 前言
本文将介绍项目的打包配置功能。
项目工程化系列文章主要通过解析element项目源码,从结构、功能、源码方面逐一解析,学习其模块化、组件化、规范化、自动化等多维度优秀实践。主要内容包含项目结构、npm script、项目构建、文档解析、打包配置、发布部署等。
👇 项目工程化系列文章链接如下,推荐按照顺序阅读文章 👇。
1️⃣ 工程化剖析:项目概览、package.json、npm script
2️⃣ 工程化剖析:项目构建、MD解析
3️⃣ 工程化剖析:打包配置
4️⃣ 工程化剖析:发布部署、持续集成
5️⃣ 工程化剖析:主题构建、自动化测试、代码质量检查、类型声明
6️⃣ 工程化剖析:项目网站
7️⃣ 工程化剖析:命令之图解
本专栏的 gitbook
版本地址已经发布 📚《learning element-ui》 ,内容同步更新中!
0x.01 📦 打包配置
🚨 项目中
webpack
版本为4.X
,文中涉及语法、功能与最新版本5.X
相比存在变化。
📝 commonjs vs commonjs2
接下来配置 libraryTarget
的选项中可以看到'commonjs'、'commonjs2'。两者之前的有什么区别?
commonjs
规范只定义了exports
, 而 module.exports
是nodejs
对commonjs
的实现, 这种扩展实现称为commonjs2
。
// commonjs
exports.a = 'a';
exports.b = 'b';
// commonjs2
module.exports = {
a : 'a',
b : 'b'
};
build/config.js
文件内容是打包配置的公用配置。
外部扩展(externals) 从输出的 bundle 中排除依赖,在运行时(runtime)从外部获取这些扩展依赖(external dependencies),主要解决组件依赖导致代码冗余问题。其中 exports.externals = externals;
内容格式如下 👇。
build/webpack.common.js
以 commonjs2
规范打包构建类库。
- 调用命令:
webpack --config build/webpack.common.js
。 - 入口文件:
src/index.js
。 - 输出文件:以
commonjs2
规范构建输出到lib/element-ui.common.js
(类库主入口文件)。
build/webpack.component.js
以 commonjs2
规范对每个组件单独打包构建,支持按需引入。
- 调用命令:
webpack --config build/webpack.component.js
。 - 入口文件:
components.json
中的组件列表。 - 输出文件:把
packages
目录下的组件,以commonjs2
规范单独构建输出到lib/components-name.js
。
build/webpack.conf.js
以 umd
规范打包构建类库,不仅可以 NodeJs 环境使用,也可以在浏览器环境(browser)使用,需要设置umdNamedDefine: true
。
- 调用命令:
webpack --config build/webpack.conf.js
。 - 入口文件:
src/index.js
。 - 输出文件:以
umd
规范构建输出到lib/index.js
。
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/
目录下。
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.js
和examples/extension/src/entry.js
。 - 输出文件:构建内容输出至
examples/extension/dist
目录下。生成文件background.js
entry.js
,复制文件icon.png
manifest.json
。
build/webpack.test.js
用于 test/unit/karma.conf.js
中打包配置。
// test/unit/karma.conf.js
const webpackConfig = require('../../build/webpack.test');
module.exports = function(config) {
const configuration = {
...
webpack: webpackConfig,
...
};
config.set(configuration);
};
📚参考&关联阅读
关注专栏
如果本文对您有所帮助请关注➕、 点赞👍、 收藏⭐!您的认可就是对我的最大支持!
此文章已收录到专栏中 👇,可以直接关注。