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

2020-01-10 20:02:18 阅读：244 来源： 互联网

标签：npm src 快速 js export 轮子 YourJsLib your

动机

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

一个基本的 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

标签：npm,src,快速,js,export,轮子,YourJsLib,your
来源： https://www.cnblogs.com/ahthw/p/12177877.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9