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

SegmentFault

共 7712字,需浏览 16分钟

 · 2021-04-06

作者:李洪威

来源:SegmentFault 思否社区

前言:


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))  // 输出:Numbe



点击左下角阅读原文,到 SegmentFault 思否社区 和文章作者展开更多互动和交流,扫描下方”二维码“或在“公众号后台回复“ 入群 ”即可加入我们的技术交流群,收获更多的技术文章~

- END -


浏览 16
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报