前言:由于工作中常用到了很多常用的方法。于是前段时间自己就整理了一些常用的方法,发布了npm,以便于之后用得到的时候可以直接通过npm安装直接import使用。
一、怎么发布自己的包到npm?
1、注册一个npm账号:
npm 登录注册地址https://www.npmjs.com/login
2、登录npm账号
1)、在你的包目录输入 npm login 进行登录,如下图
2)、查看当前登录的用户 npm whoami
3、发版 npm publish 如下图:
1)、发包package.json的配置,如下图
2)、如果出现报错的情况:
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/x-utils - You do not have permission to publish "x-utils". Are you logged in as the correct user?
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/snows_l/.npm/_logs/2023-06-26T07_54_23_109Z-debug.log
是因为npm上已经存在这个包了,命名冲突咯, 换个没有的包名就好
打开npm官网搜索x-utils,已经这个包咯,如下图
二、通过webpack打包遇到一下问题
1、打包之后东西不完整
打包之后去只有这么点。
1)、原因:是因为webpack4,webpack5打包生产环境(mode: 'production')是默认开启 tree-shaking(树摇)的, 所以其他方法没有打包
2)、Tree shaking:
Tree shaking
是基于ES6
模板语法(import
与exports
),主要是借助ES6
模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量
Tree shaking
无非就是做了两件事:
- 编译阶段利用
ES6 Module
判断哪些模块已经加载 - 判断那些模块和变量未被使用或者引用,进而删除对应代码
3)、解决方法, 在webpack.config.js中添加
optimization: {
usedExports: false // 关闭副作用标识功能
}
最后打包之后的文件就全咯
2、打包之后再发版的包不能通过 import 导入
1)、原因:?
2)、解决方法:在webpack.config.js中的output中添加 libraryTarget: 'umd' // 输入的文件格式 umd:全兼容模式
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.mini.js',
libraryTarget: 'umd' // 输入的文件格式 umd:全兼容模式
},
3、报错第三方依赖找不到
ERROR in ./utils/vue2Directive.js 9:0-22
Module not found: Error: Can't resolve 'vue' in '/Users/userDoc/work/source-snows-utils/utils'
resolve 'vue' in '/Users/userDoc/work/source-snows-utils/utils'
Parsed request is a module
using description file: /Users/userDoc/work/source-snows-utils/package.json (relative path: ./utils)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/Users/userDoc/work/source-snows-utils/utils/node_modules doesn't exist or is not a directory
looking for modules in /Users/userDoc/work/source-snows-utils/node_modules
single file module
using description file: /Users/userDoc/work/source-snows-utils/package.json (relative path: ./node_modules/vue)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/userDoc/work/source-snows-utils/node_modules/vue doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/userDoc/work/source-snows-utils/node_modules/vue.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/userDoc/work/source-snows-utils/node_modules/vue.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/userDoc/work/source-snows-utils/node_modules/vue.wasm doesn't exist
/Users/userDoc/work/source-snows-utils/node_modules/vue doesn't exist
/Users/userDoc/work/node_modules doesn't exist or is not a directory
/Users/userDoc/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./index.js 15:0-50 60:26-50 61:31-60 62:32-62 63:31-60 64:32-62 65:21-40 67:68-81
webpack 5.88.0 compiled with 1 error in 618 ms
1)、原因:因为写了一些基于vue的方法,引入了vue,为了避免过大就没有安装(这些方法只要在vue项目中使用就行)
2)、解决方法:在webpack.config.js中的 externals: { vue: 'vue' // 忽略没有引用的vue },
// 忽略没有引用的第三方模块
externals: {
vue: 'vue' // 忽略没有引用的vue
},
完整的打包 webpack.config.js 如下
/*
* @Description: ------------ snows-utils webpack 打包配置 -----------
* @Author: snows_l [email protected]
* @Date: 2023-06-26 01:27:49
* @LastEditors: snows_l [email protected]
* @LastEditTime: 2023-06-26 16:47:22
* @FilePath: /source-snows-utils/webpack.config.js
*/
const path = require('path');
module.exports = {
mode: 'production',
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.mini.js',
libraryTarget: 'umd' // 输入的文件格式 umd:全兼容模式
},
// 忽略没有引用的第三方模块
externals: {
vue: 'vue' // 忽略没有引用的vue
},
optimization: {
usedExports: false // 关闭副作用标识功能
}
};