阅读 470

快速开发一个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

关注下面的标签,发现更多相似文章
评论