* 前言：
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 BaseMethodsvalidare.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能够不必跟着做，只为了引入问题）
<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 jsUtilsMvp from 'js-utils-mvp'
console.log(jsUtilsMvp.BaseMethods.getTypeOf(88)) // 输入:Number