共计 3378 个字符，预计需要花费 9 分钟才能阅读完成。
* 前言：
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
