* 前言：
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 Validateindex.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可以不用跟着做，只为了引入问题）
原因：
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 [email protected] 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 jsUtilsMvp from 'js-utils-mvp'
console.log(jsUtilsMvp.BaseMethods.getTypeOf(88)) // 输出:Number