概述
npm包有什么用
有的同學在開發(fā)的過程中，經(jīng)常會造一些“輪子”平酿，也就是一些復用性比較強的庫（工具函數(shù)庫或者組件庫）凤优，那么將這些“輪子”發(fā)布成自己的一個npm包，絕對會給你帶來工作效率的提升蜈彼。
為什么用TypeScript
引用 TypeScrip教程 內(nèi)提及的內(nèi)容：
TypeScript 增加了代碼的可讀性和可維護性
- 類型系統(tǒng)實際上是最好的文檔筑辨，大部分的函數(shù)看看類型的定義就可以知道如何使用了
- 可以在編譯階段就發(fā)現(xiàn)大部分錯誤，這總比在運行時候出錯好
- 增強了編輯器和 IDE 的功能幸逆，包括代碼補全棍辕、接口提示、跳轉(zhuǎn)到定義还绘、代碼重構(gòu)等
TypeScript 非常包容
- TypeScript 是 JavaScript 的超集楚昭，
.js文件可以直接重命名為.ts即可- 即使不顯式的定義類型，也能夠自動做出類型推論
- TypeScript 的類型系統(tǒng)是圖靈完備的拍顷，可以定義從簡單到復雜的幾乎一切類型
- 即使 TypeScript 編譯報錯抚太，也可以生成 JavaScript 文件
- 兼容第三方庫，即使第三方庫不是用 TypeScript 寫的昔案，也可以編寫單獨的類型文件供 TypeScript 讀取
其中凭舶，對于npm上的包來說。在使用包內(nèi)的工具時候爱沟，上述的接口提示就十分強大帅霜。
可以用JavaScript嗎
有些不會TypeScrip的同學可能說，這篇不適合我看呼伸。錯身冀！
本篇內(nèi)容也可以采用
JavaScript的方式去寫，去發(fā)布使用括享。完全是適配的搂根。因為我們使用TypeScript，目的還是約束開發(fā)規(guī)范之類的問題铃辖，最終還是得通過打包成.js文件剩愧。如若用JavaScript的方式去寫，完全可以的娇斩，文末也會6.2處也會提及具體相關(guān)仁卷。上述：TypeScript 是 JavaScript 的超集穴翩，.js 文件可以直接重命名為 .ts 即可也能體現(xiàn)兩者的關(guān)系。
具體操作內(nèi)容
本文采用vue-cli3工具創(chuàng)建TypeScript項目锦积，目的是為了讓讀者更清晰看到自己寫的工具方法（寫組件同理）能及時的驗證芒帕，讓我們知悉在源碼編寫這一層面上是沒有問題。通過寫幾個簡單工具方法丰介，然后打包背蟆，發(fā)布到npm上，最后在項目中安裝自己發(fā)布的包哮幢。目的是：成功調(diào)用自己寫的包內(nèi)的方法带膀。
本文項目地址
github地址：https://github.com/chenjing0823/util-tools
npm包地址：https://www.npmjs.com/package/common-util-tools
操作步驟
1、創(chuàng)建項目
vue create util-tools
然后選擇Babel橙垢、Typescript垛叨、Unit Testing、Jest其余默認
運行項目后钢悲，正常打開vue默認頁后点额。項目創(chuàng)建完成舔株，可以繼續(xù)操作莺琳，關(guān)閉服務(wù)。
2载慈、目錄調(diào)整
之所以需要目錄調(diào)整惭等，是因為我們利用采用vue-cli3工具創(chuàng)建了TypeScript+vue的一個項目，其中在本項目內(nèi)办铡，我們只是要寫一個utils工具包辞做，而vue的頁面實例僅僅是用來校驗我們的工具是否可用可行。
所以目錄調(diào)整的目的寡具，是將包代碼合頁面實例代碼區(qū)分開秤茅。
- 在根同目錄下，創(chuàng)建一個example文件夾童叠，將src移動至改文件夾內(nèi)（頁面實例框喳，用于驗證方法，與工具包無關(guān)）
- 在根目錄下創(chuàng)建src厦坛，用于放我們寫的工具包函數(shù)方法
- tsconfig.json內(nèi)五垮，需要修改以下內(nèi)容（新增3個example/src/）
{
// ...其他配置
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"example/src/**/*.ts",
"example/src/**/*.tsx",
"example/src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
]
// ...其他配置
}
3、源碼編寫
src/index.ts:
如果對于下面4個文件存在疑惑杜秸，且比較注重發(fā)布這個過程放仗，也可以直接在index.ts內(nèi)直接export自己寫的方法，不寫其他幾個文件方法撬碟。
import * as env from "./util-tool/env"; // 方法集合1
import * as is from "./util-tool/is"; // 方法集合2
import { Types } from "./types";
import { mixin } from "./tools/index";
function initUtils(): Types {
const instance = Object.create(null);
const arr = [env, is];
mixin(instance, arr);
return instance as Types;
}
const _utils = initUtils();
export default _utils;
src/util-tool/env
utils工具方法1
/**
*
* @ignore
* @return {boolean} 判斷當前瀏覽器是移動端(false)還是pc端(true)
*
*/
export function getEnv(): boolean {
const userAgent = navigator.userAgent;
const device: string[] = [
"Android",
"iPhone",
"SymbianOS",
"Windows Phone",
"iPad",
"iPod"
];
let flag = true;
for (let i = 0; i < device.length; i++) {
if (userAgent.indexOf(device[i]) !== -1) {
flag = false;
break;
}
}
return flag;
}
src/util-tool/is
utils工具方法2
export function isArray(value: any): value is Array<any> {
return typeof value !== "undefined" && value instanceof Array;
}
export function isObject(value: any): value is Record<string, any> {
return value !== null && typeof value === "object";
}
src/types
interface Env {
/**
*
* 判斷當前瀏覽器是移動端還是pc端
* @return {boolean} pc: true; mobile: false
* @author superjing
* ``` typescript
* const env = utils.getEnv()
* ```
*/
getEnv(): boolean;
}
interface Is {
/**
*
* 判斷是否是數(shù)組
* @param value 傳入需要判斷的變量
* @return {boolean} true | false
* @author superjing
* ``` typescript
* utils.isArray([1, 2]) // true
* ```
*
*/
isArray(value: any): boolean;
}
export interface Types extends Env, Is {}
tools/index
export function mixin<T, U>(to: T, from: Array<U>): T {
from.forEach(obj => {
Object.getOwnPropertyNames(obj).forEach(key => {
to[key] = obj[key];
});
});
return to;
}
4诞挨、項目配置
簡單的配置莉撇，易理解
/build/config.doc.js
該配置調(diào)試example文件夾中的頁面實例，在這個單頁面中可以直接使用以及測試編寫的工具方法
const path = require("path");
const resolve = dir => path.join(__dirname, "../", dir);
console.log("run doc");
module.exports = {
publicPath: "./",
devServer: { port: "8000" },
outputDir: resolve("docs"),
pages: {
index: {
entry: resolve("example/src/main.ts"),
template: "public/index.html",
filename: "index.html",
title: "Index Page",
chunks: ["chunk-vendors", "chunk-common", "index"]
}
},
chainWebpack: config => {
config.plugins.delete("prefetch-index");
}
};
/build/config.lib.js
配置打包utils工具包亭姥，打包不包括example文件夾下的示例頁面稼钩，僅僅是index.ts中實現(xiàn)的函數(shù)，打包目標為umd格式达罗，兼容瀏覽器坝撑，node以及es6模塊規(guī)范；
const path = require("path");
const resolve = dir => path.join(__dirname, "../", dir);
console.log("run lib");
module.exports = {
outputDir: resolve("dist"),
configureWebpack: {
entry: {
utils: resolve("src/index.ts")
},
output: {
filename: `[name].js`,
libraryTarget: "umd",
libraryExport: "default",
library: "utils",
globalObject: "this"
}
},
css: {
extract: {
filename: `[name].css`
}
},
chainWebpack: config => {
config.optimization.delete("splitChunks");
config.plugins.delete("copy");
config.plugins.delete("preload");
config.plugins.delete("prefetch");
config.plugins.delete("html");
config.plugins.delete("hmr");
config.entryPoints.delete("app");
}
};
/build/index.js
module.exports =
process.env.NODE_ENV === "production"
? require("./config.lib")
: require("./config.doc");
/vue.config.js
module.exports = require("./build/index");
到這為止粮揉，配置完成巡李。下面進行工具調(diào)試
5、本地調(diào)試
/example/src/App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "./components/HelloWorld.vue";
import utils from "@/index";
@Component({
components: {
HelloWorld
}
})
export default class App extends Vue {
mounted() {
console.log(123);
console.log("utils.isArray([]) is array is:", utils.isArray([]));
console.log("utils.isArray('') is array is:", utils.isArray(""));
}
}
</script>
啟動服務(wù)（確認4侨拦、項目配置無誤后，方可正常啟動）
npm run serve
可以看到寫的工具可以正常使用：
6辐宾、打包發(fā)布
6.1 打包
在4狱从、項目配置的config.lib.js內(nèi)，已經(jīng)寫了打包相關(guān)內(nèi)容叠纹，運行打包命令
npm run build
在目錄處生成dist文件夾季研，內(nèi)有生成的utils.js
同樣，在根目錄建一個demo.html誉察，直接引入打包生成的js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/utils.js"></script>
<script>
console.log(123);
console.log("utils.isArray([]) is array is:", utils.isArray([]));
console.log("utils.isArray('') is array is:", utils.isArray(""));
</script>
</body>
</html>
同樣可以正常使用与涡，于是工具包便算開發(fā)完成，可以自己發(fā)布了（若公司內(nèi)要規(guī)范npm的包持偏，還需要進行單元測試驼卖，我們構(gòu)建項目的時候已經(jīng)選擇了
Unit Testing、Jest）
6.2 發(fā)布
通過該文件鸿秆，其實也可以看到酌畜，若是用JavaScript寫該插件，也是極其方便的卿叽，只要把最后打包生成的js設(shè)為mian的入口即可桥胞。對typescript有不熟悉的，也可以用JavaScript進行開發(fā)
修改package.json
{
"name": "common-util-tools", // 包名附帽，不能跟已有的包名有重復
"version": "0.1.0", // 每次發(fā)布需要修改版本號
"private": false, // 需要設(shè)置false
"author": "chenjing0823",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"repository": {
"type": "git",
"url": "https://github.com/chenjing0823/util-tools"
},
"license": "MIT",
"main": "dist/utils.js", // 入口需要正確
"keywords": [
"utils",
"tools"
],
"files": [
"dist"
],
// ...其余代碼
}
然后發(fā)布（需要注冊npm賬戶埠戳，并先登陸自己的npm賬號發(fā)布）
npm publish
發(fā)布成功后，大概在短暫的延遲過后蕉扮，就可以在https://www.npmjs.com/搜到自己發(fā)布的插件了整胃。
對于發(fā)布有問題的，可以參考發(fā)布npm包時遇到的一些坑
7喳钟、安裝調(diào)用
到上述為止屁使，包的創(chuàng)建在岂、編寫、發(fā)布已經(jīng)完成了蛮寂，現(xiàn)在來試用一下試試：
7.1 新建一個空文件夾
在該文件夾下init生成一個空項目
npm init -y
7.2 安裝我們的包
npm install common-util-tools -D
可以在package.json內(nèi)看到：
7.3 新建一個index.js
const utils = require('common-util-tools')
console.log(123);
console.log("utils.isArray([]) is array is:", utils.isArray([]));
console.log("utils.isArray('') is array is:", utils.isArray(""));
7.4 使用測試
node index.js
到此蔽午，我們從創(chuàng)建項目 - > 編寫代碼 - > 項目配置 - > 打包發(fā)布 - > 包的使用，已經(jīng)大功告成酬蹋，后續(xù)讀者朋友就可以寫出自己的一套東西去發(fā)布使用及老。例如一些公共組件的編寫，公共方法的編寫范抓。
