前端项目模块化的实践2：使用 Webpack 打包基础设施代码

最新推荐文章于 2022-07-25 14:38:16 发布

denggua0627

最新推荐文章于 2022-07-25 14:38:16 发布

阅读量175

点赞数

文章标签： webpack 前端 json ViewUI

原文链接：http://www.cnblogs.com/Jusfr/p/9551119.html

版权

以下是关于前端项目模块化的实践，包含以下内容：

使用 TypeScript 的收益
使用 Mocha/Jest 进行单元测试 [实现中]

本文是关于前端项目模板化的第2部分

现状

实际项目远远比示例使用的 myGreeting 复杂，比如

为了提高可维护性我们将项目折成了许多功能模板；
我们希望使用 Promise 等语法等，但是顾忌目标环境的支持能力；
可能依赖了多个第三方类库；
为了提高加载速度我们打包时需要进行很多额外工作；
- 代码压缩；
- Tree Shaking（参考文末）；
既能运行在 WEB 浏览器，也能在 NodeJS 中使用；

假设我们有一个工具集项目 myHammer，包含 base64 转换功能和一个简单版的字典树实现，项目结构如下：

busybruce@DESKTOP-B8KJKRS /d/Documents/MyGit/PracticeInNPM/myHammer
$ tree src/ test/
src/
├── base64.js
├── index.js
└── TrieFilter.js
test/
├── base64.test.js
└── TrieFilter.test.js

0 directories, 5 files

index.js 导出了项目中的功能模块：

const base64     = require('./base64');
const TrieFilter = require('./TrieFilter')

module.exports = {
    base64,
    TrieFilter,
}

如果不打包，单独发布当前项目到 NPM 仓库并没有问题，只是

依赖本项目的时候写法比较纠结，形如 const base64 = require('myHammer/src/base64')；
可能存在到目标环境的适配问题，如前文所述；

目标环境不支持 Promise 等语法等
源码是 CoffeeScript 或者 TypeScript，没法直接引用

下面使用 Webpack 来解决这些问题。

Webpack 打包基础类库

Webpack 文档内容多，网上教程多是关于应用打包，现整理如下。

本文并非 Webpack 的使用指南，只提及类库打包，行文时Webpack已更新至4.x 版本。

`package.json`

需要配置 package.json 的 main 节点供 NodeJS 环境使用。

"main": "src/index.js",

NodeJS 运行环境作了约定，使用 require('xxx')时将读取该配置。

避免形如 require('myHammer/src/base64')类似的引用完整路径的写法
如果源码使用了高版本的语言特性，可以转译和打包代码到形如 dist/inde-es5.js 的路径，再修改该配置指向该文件以向下兼容
使用需要转译成 JavaScript 语言同理

在部分 IDE 时我们查找引用时，往往发现函数声明有好多处实现，原因就在于代码转译、打包成了很多份，如下图所示。

`webpack.config.js`

类库打包需要对 webpack.config.js 中的 output 进行配置，摘取如下：

output : {
  library      : "hammer",
  libraryTarget: "umd",
  globalObject : "this",
  path         : path.join(__dirname, "dist"),
  filename     : "hammer.js",
}

其他配置请自行阅读文档，完整内容见代码 webpack.config.js。

libraryTarget: 为了在浏览器和 NodeJS 环境中同时生效，需要使用 umd 作为目标，参考 output-librarytarget
globalObject: 使用 this替换默认的 window，参考 Webpack 4.0.1 | WebWorker window is not defined #6642

如前文所述，在不考虑语言、版本、目标平台的差异的情况下，直接将源码发布到 NPM 仓库，再添加依赖和引用并无问题。在业务日益复杂的情况下，手写代码在实现层面直接消除这些差异是无比巨大的工作量，使用 Webpack 让我们更专注业务本身， Make life easier。

发布到 NPM 和使用依赖

在完成了具体业务后，我们打包项目并发布到私有 NPM 仓库

webpack --mode development # 视具体需求
npm publish --registry http://ubuntu-17:4873 # --force

在 myDemo 项目中我们添加引用

yarn add myHammer --registry http://ubuntu-17:4873

修改 index.js 如下：

const myGreeting = require('myGreeting');
const {base64}   = require('myHammer');

(function () {
    let greeting = myGreeting('Rattz');
    console.log(base64.encode(greeting));
})();

运行起来