在前端开发中，我们常常使用 npm 包来管理依赖项。而在打包构建方面，常见的工具有 webpack 和 spm，它们分别有着不同的优点。本文将介绍一个 npm 包 spm-webpack，它可以将 webpack 打包的模块转化为适用于 spm 的模块格式，让我们在既能用上 webpack 的强大功能，又能避免 spm 的一些缺陷。
1. 安装
使用 spm-webpack 需要先安装它以及 webpack：
npm install spm-webpack webpack --save-dev
spm-webpack 是一个开源 npm 包，可以在 npmjs.com 找到它的官方网站。
2. 使用
使用 spm-webpack 的基本流程如下：
- 编写 webpack 配置文件。
- 使用 webpack 打包出符合 spm 协议的文件。
- 使用 spm 发布。
2.1 编写配置文件
在项目根目录下新建 webpack.config.js 文件，用于配置 webpack。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ----------------
----- ----------------------- --------
-------- ------------
-------------- ------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
--其中的 entry 字段指定了入口文件，output 字段指定了打包后的文件的名字和路径以及打包后的模块定义方式，module.rules 中配置了 babel-loader 让 webpack 能够识别并转化 ES6 代码。
2.2 打包
在命令行中运行以下命令可以打包出符合 spm 协议的文件：
./node_modules/.bin/webpack
也可以在 package.json 的 scripts 字段中配置打包命令：
{
"scripts": {
"build": "webpack"
}
}然后就可以使用 npm run build 来打包了。
2.3 发布
使用 spm 发布打包生成的文件。
spm publish --tag=1.0.0
其中 tag 指定了版本号。
3. 示例
在 package.json 中新增以下依赖项：
-- -------------------- ---- -------
-
--------------- -
--------- ---------
------------- ---------
--
------------------ -
-------------- ----------
-------------------- ----------
--------------- ---------
-------------- ---------
---------- ----------
-------------- --------
--
-在 src 目录下新增以下文件：
index.js
-- -------------------- ---- ------- ------ - ---- --------- ------ - ---- ------------- ----- --------- - - -------- -------- -- -- -- -- -- ------ ------- ----------
在根目录中运行 webpack，得到了符合 spm 格式的文件：
my-library.js
-- -------------------- ---- -------
-------------------------------- ----------------- ---------------------- ----------------- -------- ------- -
--- - - -------------------------
--- - - ------------------------------
--- --------- - -
-------- --------
-- --
-- --
--
-------------- - ----------
---使用 spm 发布。
spm publish --tag=0.0.1
至此，我们已经成功将一个基于 webpack 构建的前端工具库发布到了 spm 仓库中。
4. 总结
spm-webpack 是一个便捷的工具，能够方便地让我们将 webpack 工程转化为 spm 模块。使用 spm，我们可以更多地在前端工程领域践行“约定优于配置”的思想。同时，这也是一个学习 webpack 和 spm 的绝佳机会。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70691