* 前言：
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能够不必跟着做，只为了引入问题）
<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
发表回复