實例建立本身的npm包，發佈npm包並使用

* 前言：

npm 是 Node.js 官方提供的包管理工具，項目中咱們常常用到npm包（」npm install xxx」），咱們爲何須要npm，個人理解是npm是爲了解決：代碼複用；由於基於已有的成熟代碼快速開發新的應用，能夠極大地提升開發效率，「不要重複造輪子」；

爲何要建立本身的npm包？平時項目積累的公共方法，能夠封裝起來，發佈到本身的npm包，以便咱們在項目中方便複用；

* 建立簡單npm包：

文件結構目錄：

js-utils

--src

----base.js

----validate.js

--index.js

base.js文件：

const BaseMethods = {
    /**
     * 獲取數據類型
     * @param params 
     * @returns 'String','Number'...
     */
    getTypeOf: (params) => {
        let type = Object.prototype.toString.call(params)
        return type.match(/\[\w+\W(\w+)\]$/)[1]
    },
    /**
     * 數組，字符串去重
     * @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 BaseMethods

validare.js文件：

const Validate = {
    /**
     * 手機號校驗
     */
    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執行命令: npm init 用來初始化生成package.json,它是 NodeJS 約定的用來存放項目的信息和配置等信息的文件

* 將包上傳發布到npm

一、登陸npm官網（https://www.npmjs.com/），註冊一個npm帳號（而後註冊完後，去你的郵箱根據提示進行操做，驗證經過便可）

二、在文件夾js-utils執行登陸命令：npm login ，輸入你在npm官網的帳號、密碼和郵箱

注意：發現報錯，須要將淘寶鏡像去掉，還原成官方鏡像，執行命令： npm config delete registry

或者直接切換鏡像：

設置淘x,寶的是：
npm config set registry https://registry.npm.taobao.org
不想用他們的，再設置回原來的就能夠了：
npm config set registry https://registry.npmjs.org

還原成官方鏡像，npm login登錄成功；以下圖：

登陸成功後，執行命令: npm publish 來發布上傳你的包

注意：發現報錯，js-utils包名被使用，package.json文件中更改 "name": "js-utils-mvp"，再次執行npm publish成功了，以下圖：

* 使用npm包：

新建test文件在項目中使用你已經發布的包，執行命令：npm install js-utils-mvp，以下圖：

不須要跟着操做--begin
在test文件下面新建index.html頁面；分別經過下面require或者import方式引入發現均報錯：（新增index.html能夠不用跟着作，只爲了引入問題）

<script>
// let jsUtils = require('js-utils-mvp')
//import jsUtils from 'js-utils-mvp'
</script>

緣由：

一、require()不是JavaScript標準的一部分，瀏覽器不提供即用的支持，它是node.js模塊系統.

二、沒法在模塊外部使用import語句，由於Module 的加載實現的是es6語法

不須要跟着操做--end
綜上，發現建立的npm包js-utils-mvp還存在兼容性問題；如何解決瀏覽器不支持ES6的特性；

一、Babel是一個普遍使用的轉碼器，babel能夠將ES6代碼完美地轉換爲ES5代碼；

二、webpack 是一個用於現代 JavaScript 應用程序的 _靜態模塊打包工具，能夠藉助babel-loader幫咱們將ES6代碼完轉換爲ES5代碼；_

* 項目引入webpack打包工具

一、局部安裝，執行命令： npm install webpack@4.43.0 webpack-cli -D

注意：這裏有坑要，我webpack不鎖定安裝版本的話，默認安裝到5以上的版本，致使打包出來的文件爲空，也沒報錯。。因此鎖定版本

二、js-utils文件下新建webpack.config.js文件

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']
                }
                }
            }
        ]
    }
    
}

三、babel-loader在webpack中配置（參照 https://www.babeljs.cn/setup#installation）

執行命令：npm install --save-dev babel-loader @babel/core

babel-loader是webpack 與 babel的通訊橋樑，不會作把es6轉成es5的工做，這部分工做須要用到@babel/preset-env來作，因此還要

執行命令：npm install @babel/preset-env --save-dev

四、package.json中新增

"scripts": {
    "build": "npx webpack --config webpack.config.js"
  },

npx webpack --config webpack.config.js //指定webpack使用webpack.config.js文件來做爲配置文件並執行；

五、執行打包命令：npm run build；打包生成的build文件下面的jsUtils.js文件，以供使用

六、更改package.json中mian字段

"main": "index.js",更改成 "main": "/build/jsUtils.js"

由於當咱們在不一樣環境下 import 一個 npm 包時，到底加載的是 npm 包的哪一個文件？

答案是：main 字段中指定的文件。（這纔是咱們經過webpack和babel打包處理事後的文件）

以上已經完成了製做一個簡單的npm包併發布，再次更新上傳到npm

注意：每次更新上傳，記得在package.json中更改版本號，如：

"version": "1.0.0",更改成"version": "1.0.1",再次重複上圖更新發布指令就成功了

* 項目中引用js-utils-mvp

執行命令：npm i js-utils-mvp -D

import jsUtilsMvp from 'js-utils-mvp'

console.log(jsUtilsMvp.BaseMethods.getTypeOf(88))  // 輸出:Number