快速开发一个npm包(轮子)

Posted 2021-03-17 ahthw

动机

很多人都想写一个自己的轮子，可是开始动手的时候你总会遇到以下问题

• 一个基本的 js 库应该如何编写
• 基本的前端项目都要哪些文件
• 又要怎么打包发布到 npm 上
• 你的 es6 语法如何才能让别人识别
• readme 应该如何编写
• 如何添加 eslint
• 怎么才能打包一个 umd 格式文件让 html 直接引用

为此，我专门制作了一套快速搭建 javascript 项目库的模板，并且做好了基本的配置。

目录如下：

.
├── _config.yml
├── build # 打包后的项目文件目录
|   ├── your-js-lib.min.js # 压缩后的js项目库文件
|   └── your-js-lib.min.js.map # map文件
├── node_modules # node_modules
|   └── ... # 依赖组件
├── src # src目录
|   ├── core # 源码组件目录
|   └── index.js # 入口文件
├── .babelrc # babel配置文件
├── .gitignore # git忽略提交
├── .npmignore # npm发表忽略提交
├── eslintrc.json # eslin配置及规则说明
├── LICENSE # LICENSE
├── package.json # 包依赖管理文件
├── README.md # 项目使用说明文档
└── rollup.config.js # rollup打包工具配置文档
复制代码

开发

开发工作时，我们一般在src目录中根据自己的需要创建项目文件或目录，以下两步方式对外 export。

step1

// `src/core/`
export default a or export {a, b}

step2

// `src/index.js
import YourJsLib from "./core/YourJsLib";
export default YourJsLib;

es6 lint

npm run lint

打包

npm run build

使用

直接在页面引用

<script src="js/your-js-lib.min.js"></script>

Or install using npm

npm install your-js-lib --save
...

import YourJsLib from ‘your-js-lib‘;

PS

• 开发过程时需要根据自己的开发工具安装eslint插件
• npm包的发布需要自己根据项目名创建

项目参考地址：(欢迎大家star，提供issues，不断完善本仓库。)

YourJsLib