乐趣区

关于npm:实例创建自己的npm包发布npm包并使用

jiezi

* 前言：

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 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 jsUtilsMvp from ‘js-utils-mvp’

console.log(jsUtilsMvp.BaseMethods.getTypeOf(88))  // 输入:Number

退出移动版