如果你想开发一个 JavaScript 库并发布到 npm，那么本教程将为你提供一个基于 npm 包 jslibrary-boilerplate 的快速入门教程。该仓库提供了基础的项目结构，自动生成测试文件、支持 ES6、Umd 在浏览器中使用等功能，减轻了你的开发负担，同时还遵循了最佳实践。
安装 jslibrary-boilerplate
安装 jslibrary-boilerplate 是很简单的，执行以下命令即可：
npm install jslibrary-boilerplate -g
创建你的 npm 包
执行以下命令创建你的 npm 包：
jslib your-library-name
这将会创建你的新项目文件夹，并在其中包含一个基础项目结构，如下所示：
-- -------------------- ---- ------- - --- --- - --- ------- --- ---- - --- ------------ --- -------------- --- ---------- --- ------------ --- ---------
接下来我们将针对这些文件进行讲解。
package.json
package.json 是你的项目根目录里面使用的配置文件，其中包含了你项目的名称、版本、依赖等配置。我们需要根据我们的实际业务来进行相应的修改。以下是一个基础的示例，你可以在其基础上根据需要进行修改：
-- -------------------- ---- -------
-
------- --------------------
---------- --------
-------------- -- ----- ----------- -- ---- ---------
------- --------------
---------- -
------- -------
-------- ------- ----
------- ------- - ----- ------------
--
----------- -
-------
------
-------
--
--------- ----- ------
---------- ------
------------------ -
-------------- ---------
-------------------- ---------
------------- ----------
--------- ---------
------- ----------
--------- ----------
---------------------- ---------
------------------------- ----------
--------------------- ---------
----------------------------- ---------
----------------------- --------
-
-lib/main.js
lib/main.js 是你的库函数的主入口点。在这个文件中，你要编写任何你想要暴露给外部使用的代码。以下是一个基本的示例：
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}test/main.test.js
test/main.test.js 包含了你的单元测试。这里使用了 Jest，因此你需要通过以下命令安装它：
npm install jest --save-dev
以下是一个基本的测试示例：
-- -------------------- ---- ------- ------ - ---- -------- - ---- -------------- ---------- --- --- --------- -- -- - ------------- ------------ --- --------------- -------- --- --------- -- -- - ------------------ ------------ ---
.eslintrc.json
.eslintrc.json 文件包含了你的 Eslint 配置。这是在项目中使用 Eslint 进行一致的代码规范以及错误检测的优秀工具，你需要在你的项目中执行以下命令来安装它：
npm install eslint --save-dev
以下是一个基础的配置示例：
-- -------------------- ---- -------
-
---------------- -
-------------- --
------------- --------
--
------ -
---------- -----
------ -----
------- -----
------- ----
--
---------- ---------------------
-------- -
------------- -------
--------- --------- ---
--------- --------- ----------
------- --------- ---------
--
----------------- ---------------- -------
-发布你的 npm 包
在你打包或准备发布手动包之前，需要确保你的代码已经使用 npm run lint 和 npm test 命令进行了正确的测试和验证。一旦你做好了这些准备工作，你只需运行以下命令来发行你的包：
npm publish
向浏览器中导入你的库
你的 JavaScript 库可以让客户端浏览器使用，只需要将打包后的 Umd 文件导入到项目中即可。以下是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------- ------------
-------
------
------- ---------------------------------------
--------
------------------ ----
----------------------- ----
---------
-------
-------总结
本教程提供了使用 npm 包 jslibrary-boilerplate 来创建并发布你的第一个 JavaScript 库的全过程，包含了创建 npm 包、修改配置文件、编写代码、测试、发行和使用等方面的内容。希望这篇文章对你有帮助，祝你撰写出更好的 JavaScript 库！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3481e8991b448d7d64