欢迎光临
我们一直在努力

实例创建自己的npm包,发布npm包并使用

* 前言:

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官网的账号、密码和邮箱

image.png

注意:发现报错,需要将淘宝镜像去掉,还原成官方镜像,执行命令: 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 来发布上传你的包

image.png

注意:发现报错,js-utils包名被使用,package.json文件中更改 “name”: “js-utils-mvp”,再次执行npm publish成功了,如下图:

image.png

* 使用npm包:

新建test文件在项目中使用你已经发布的包,执行命令:npm install js-utils-mvp,如下图:

image.png

不需要跟着操作–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模块系统.

image.png

2、无法在模块外部使用import语句,因为Module 的加载实现的是es6语法

image.png

不需要跟着操作–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文件,以供使用

image.png

6、更改package.json中mian字段

“main”: “index.js”,更改为 “main”: “/build/jsUtils.js”

因为当我们在不同环境下 import 一个 npm 包时,到底加载的是 npm 包的哪个文件?

答案是:main 字段中指定的文件。(这才是我们通过webpack和babel打包处理过后的文件)

以上已经完成了制作一个简单的npm包并发布,再次更新上传到npm

image.png

注意:每次更新上传,记得在package.json中更改版本号,如:

“version”: “1.0.0”,更改为”version”: “1.0.1”,再次重复上图更新发布指令就成功了

image.png

* 项目中引用js-utils-mvp

执行命令:npm i js-utils-mvp -D

import jsUtilsMvp from ‘js-utils-mvp’

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

https://segmentfault.com/a/1190000039766438

赞(0)
未经允许不得转载:ITyet » 实例创建自己的npm包,发布npm包并使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址