一个构建
javascript工具库的起手式开发模板。轻而易举造轮子，我们不生产轮子，我们只是轮子的搬运工。
请使用locilc脚手架工具构建模板：
npm install locilc -g
lic create my-utils使用lic create <project>指令进入创建选项，创建时请选择tools-base模板，创建过程需要输入一个UMD模块的全局对象名称，作为cdn方式引入时的全局对象来使用，名称若存在多个单词，推荐使用大驼峰命名，例如: CandyBag 请遵循变量的命名规范来命名UMD模块名称。
如需了解locilc其他相关操作请查阅：https://github.com/loclink/locilc。
在项目创建完成后，如需修改UMD名称，则可以自行编辑tools.config.json文件对umdName属性进行修改：
{
"umdName":"myUtils"
}.
├── index.d.ts # 类型声明文件
├── package.json # 项目配置文件
├── readme.md # 项目描述文件
├── rollup.config.ts # rollup打包配置文件
├── src # 工具库核心代码
│ ├── index.ts # 打包入口文件，所有的方法都应从此文件统一导出
│ └── modules # 所有的模块放于此文件夹下方便区分和管理
│ ├── higher # 高阶函数类型的工具函数放于此
│ │ ├── debounce.ts # 内置的防抖函数
│ │ └── throttle.ts # 内置的节流函数
│ └── string # 处理string的工具函数放于此
│ └── format.ts # 格式化方法 - 内置一个字符串首字母转大写的工具函数
├── tools.config.json # tools-base的配置文件 - 目前仅支持配置 umdName
└── tsconfig.json # ts配置文件项目构建之初将内置三个工具函数debounce(防抖) throttle(节流) firstUpperCase(首字母转大写)，具体内容查看modules文件夹下所有包含的文件。
- 模块要求使用
typescript来开发你的工具库，并使用ES6 module的导入导出方式，即：import ... from ...和export。 - 所有方法必须统一从
src/index.ts下导出。 - 请利用
typescript的优势，多使用类型声明。这将使你的库具备良好的语法智能提示，以及类型检测。
- 体验一下基于
tools-base而开发的工具库candy-bag
npm install candy-bag- 使用
Commonjs方式导入：
const { firstUpperCase } = require('candy-bag');
console.log(firstUpperCase('hello')) // Hello- 使用
ES6 module方式导入：
import { firstUpperCase } from 'candy-bag'
console.log(firstUpperCase('hello')) // Hello- 在
html文件中使用cdn方式导入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 通过cdn方式引入全局对象：CandyBag -->
<script src="https://cdn.jsdelivr.net/npm/candy-bag"></script>
<script>
console.log(CandyBag.firstUpperCase('hello')) // Hello
</script>
</body>
</html>想了解更多有关candy-bag的内容： https://github.com/loclink/candy-bag
默认情况下，tools-base的使用无需修改任何配置，按照约定的规则即可快速开发工具库，如果你使用了第三方库，例如你的工具库中依赖lodash，并且不希望在打包时将loaash打包至自己的库中，希望用户在使用时自行安装lodash，那么你可以在rollup.config.ts配置文件中找到：external配置项，并且配置为：external: ['lodash'],该配置可配置多个第三方依赖库。
umd模块必须拥有一个全局对象，您可以通过修改tools.config.json中的umdName属性配置全局对象名称。
打包操作会将你编写的工具库核心代码打包至dist文件夹下，并按照模块类型区分文件名：
打包指令：
npm run build打包输出后的文件目录结构：
├── dist
│ ├── projectName.js # cjs 模块格式的文件
│ ├── projectName.cjs.min.js # cjs 格式压缩后的文件
│ ├── projectName.esm.js # ESM 模块格式的文件
│ ├── projectName.esm.min.js # ESM 模块压缩后的文件
│ ├── projectName.js # umd 模块格式文件
│ ├── projectName.min.js # umd 模块格式压缩文件
│ ├── package.json # 项目配置文件
│ ├── readme.md # 描述文件
│ ├── rollup.config.d.ts
│ └── src # 工具库的类型声明文件放于此文件夹内
│ ├── index.d.ts
│ └── modules
│ ├── higher
│ │ ├── debounce.d.ts
│ │ └── throttle.d.ts
│ └── string
│ └── format.d.ts打包后你将得到一个完整的库文件，并覆盖所有模块类型。
通过查看package.json文件我们可以看到：
| 属性 | 值 | 说明 |
|---|---|---|
| main | projectName.cjs.min.js | 入口函数的文件， cjs 版本打包后的文件名 |
| module | projectName.esm.min.js | esm 版本打包后的文件名 |
| umd:mian | projectName.js | umd 版本打包后的文件名 |
| jsdelivr | projectName.min.js | jsdelivr cdn 默认加载文件 |
发布之前最好先编写readme.md项目描述文件，然后使用npm login指令登录至仓库服务器，再使用指令：
npm run release该命令将会自动帮您把dist打包文件夹作为库发布至您的npm仓库中。发布成功之后您就可以在项目中使用 npm install <packageName>命令安装至项目或使用cdn的方式引入并使用了。
发布后通过cdn引入方式可使用该地址：https://cdn.jsdelivr.net/npm/包名称
使用 purge.jsdelivr.net/npm/ 包名称/可刷新cdn缓存。