實(shí)例創(chuàng)建自己的npm包，發(fā)布npm包并使用
作者：李洪威
前言：
npm 是 Node.js 官方提供的包管理工具，項(xiàng)目中我們經(jīng)常用到npm包（”npm install xxx”），我們?yōu)槭裁葱枰猲pm，我的理解是npm是為了解決：代碼復(fù)用；因?yàn)榛谝延械某墒齑a快速開(kāi)發(fā)新的應(yīng)用，可以極大地提高開(kāi)發(fā)效率，“不要重復(fù)造輪子”；
為什么要?jiǎng)?chuàng)建自己的npm包？平時(shí)項(xiàng)目積累的公共方法，可以封裝起來(lái)，發(fā)布到自己的npm包，以便我們?cè)陧?xiàng)目中方便復(fù)用；
創(chuàng)建簡(jiǎn)單npm包：
文件結(jié)構(gòu)目錄：
js-utils
--src
----base.js
----validate.js
--index.js
base.js文件：
const BaseMethods = {
/**
* 獲取數(shù)據(jù)類(lèi)型
* @param params
* @returns 'String','Number'...
*/
getTypeOf: (params) => {
let type = Object.prototype.toString.call(params)
return type.match(/\[\w+\W(\w+)\]$/)[1]
},
/**
* 數(shù)組，字符串去重
* @param Array,String
* @returns
*/
unique: (params) => {
if (this.getTypeOf(params) === 'Array') {
return [...new Set(arr)]
}
if (this.getTypeOf(params) === 'String') {
let obj = {}
let str = ''
for(let i = 0, len = params.length; i < len; i++) {
if (obj[params[i]]) {
str += params[i]
obj[params[i]] = true
}
}
return str
}
}
}
export default BaseMethodsvalidare.js文件：
const Validate = {
/**
* 手機(jī)號(hào)校驗(yàn)
*/
mobileCheck: (mobile) => {
let reg = /^[1][3,4,5,7,8][0-9]{9}$/
return reg.test(mobile)
}
}
export default Validate
index.js文件：
import BaseMethods from './src/base'
import Validate from './src/validate'
export default {
BaseMethods,
Validate
}
在文件夾js-utils執(zhí)行命令: npm init 用來(lái)初始化生成package.json,它是 NodeJS 約定的用來(lái)存放項(xiàng)目的信息和配置等信息的文件
將包上傳發(fā)布到npm
1、登錄npm官網(wǎng)（https://www.npmjs.com/），注冊(cè)一個(gè)npm賬號(hào)（然后注冊(cè)完后，去你的郵箱根據(jù)提示進(jìn)行操作，驗(yàn)證通過(guò)即可）
2、在文件夾js-utils執(zhí)行登錄命令：npm login ，輸入你在npm官網(wǎng)的賬號(hào)、密碼和郵箱
注意：發(fā)現(xiàn)報(bào)錯(cuò)，需要將淘寶鏡像去掉，還原成官方鏡像，執(zhí)行命令： npm config delete registry
npm config set registry https://registry.npm.taobao.org
不想用他們的，再設(shè)置回原來(lái)的就可以了：
npm config set registry https://registry.npmjs.org
注意：發(fā)現(xiàn)報(bào)錯(cuò)，js-utils包名被使用，package.json文件中更改 "name": "js-utils-mvp"，再次執(zhí)行npm publish成功了，如下圖：
使用npm包：
在test文件下面新建index.html頁(yè)面；分別通過(guò)下面require或者import方式引入發(fā)現(xiàn)均報(bào)錯(cuò)：（新增index.html可以不用跟著做，只為了引入問(wèn)題）
// let jsUtils = require('js-utils-mvp')
//import jsUtils from 'js-utils-mvp'
</script>
綜上，發(fā)現(xiàn)創(chuàng)建的npm包js-utils-mvp還存在兼容性問(wèn)題；如何解決瀏覽器不支持ES6的特性；
項(xiàng)目引入webpack打包工具
const path = require('path')
module.exports = {
// 入口文件
entry: './index.js',
// 輸出配置
output: {
path: path.resolve(__dirname, 'build'),
filename: 'jsUtils.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
"scripts": {
"build": "npx webpack --config webpack.config.js"
},
項(xiàng)目中引用js-utils-mvp
評(píng)論
圖片
表情