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

动机

不少人都想写一个本身的轮子，但是开始动手的时候你总会遇到如下问题

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

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

目录以下：

.
├── 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