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

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

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

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'
};

参考https://blog.51cto.com/u_11436461/2882250

build/config.js

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

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