快速開發一個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