实例创建自己的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: function(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

1、登录npm官网（https://www.npmjs.com/），注册一个npm账号（然后注册完后，去你的邮箱根据提示进行操作，验证通过即可）

2、在文件夹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>

原因：

1、require()不是JavaScript标准的一部分，浏览器不提供即用的支持，它是node.js模块系统.

2、无法在模块外部使用import语句，因为Module 的加载实现的是es6语法

不需要跟着操作--end综上，发现创建的npm包js-utils-mvp还存在兼容性问题；如何解决浏览器不支持ES6的特性；

1、Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码；

2、webpack 是一个用于现代 JavaScript 应用程序的 _静态模块打包工具，可以借助babel-loader帮我们将ES6代码完转换为ES5代码；_

* 项目引入webpack打包工具

1、局部安装，执行命令： npm install webpack@4.43.0 webpack-cli -D

注意：这里有坑要，我webpack不锁定安装版本的话，默认安装到5以上的版本，导致打包出来的文件为空，也没报错。。所以锁定版本

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

3、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

4、package.json中新增

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

npx webpack --config webpack.config.js //指定webpack使用webpack.config.js文件来作为配置文件并执行；

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

6、更改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 jsUtils from 'js-utils-mvp'

console.log(jsUtils.BaseMethods.getTypeOf(88))  // 输出:Number

* 新增README.md陈述说明文档

# js-utils-mvp

build - 外部引用资源包 src - 资源文件 ├── base.js - 基础方法 │ ├── getTypeOf - 获取数据类型 │ └── unique - 数组，字符串去重 ├── validate.js - 校验方法 │ ├── mobileCheck - 手机号校验

<!-- 项目中引入js-utils-mvp -->执行命令：npm i js-utils-mvp -D

<!-- 调用方法 -->import jsUtils from 'js-utils-mvp'

console.log(jsUtils.BaseMethods.getTypeOf(88)) // 输出:Numberconsole.log(jsUtils.Validate.mobileCheck(15944448888)) // 输出:true