npm发布属于自己的包，以及发包过程中webpack打包遇到的一些问题以及解决方法，以后遇到相同的问题就可以直接来翻咯

前言：由于工作中常用到了很多常用的方法。于是前段时间自己就整理了一些常用的方法，发布了npm，以便于之后用得到的时候可以直接通过npm安装直接import使用。

一些常用的工具函数（snows-utils）https://blog.csdn.net/snows_l/article/details/131384116?spm=1001.2014.3001.5502

一、怎么发布自己的包到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 // 关闭副作用标识功能
  }
};