webpack发布组件

发布组件

指令集合

切换到淘宝镜像

npm config set registry https://registry.npm.taobao.org

切换到npm镜像

npm config set registry https://registry.npmjs.org/

查看镜像地址

npm config get registry

npm 登录

npm login

发布

npm publish

错误：code E403

1： 邮箱未验证,找到收件箱，找到下面这句话，然后点击，下面的网址进行验证

Once verified, you can start using all of npm's features to explore and publish packages.

Button not working? Paste the following link into your browser: https://www.npmjs.com/verify/xxxxxxxxxxxxxxxxx-xxxx-xxxxx

You’re receiving this email because you recently created an npm account. If this wasn’t you, please ignore this email.

2：该包名已被人发布过了，换个名字就好

webpack 打包库和组件

webpack除了可以用来打包应用，也可以用来打包js库

目标

• 一个大整数计算的库
• 需要打包压缩版和非压缩版
• 支持AMD/CJS/ESM 模块引入

目录结构

• src
  • index.js
• dist
  • large-number-js
  • larg-number.min.js
• index.js
• webpack.config.js
• package.json

使用方式

• 支持ES module

  import * as largeNumber from "large-number"
  
  largeNumber.add("9999", "1")
  

• 支持CJS

  const largeNumbers = require("large-number");
  
  largeNumber.add("9999", "1")
  

• 支持AMD

  require(["large-number"], function(largeNumber){
    largeNumber.add("9999", "1") 
  })
  

• 直接使用script引入

   <script src="https://unpkg.com/large-number/dist/large-number.min.js"></script>
  
  <script>
  	largeNumber.add("9999", "1");
  	window.largeNumber.add("9999", "1")
  </script>
  

如何将库暴露出去

library：指定库的全局变量

libraryTarget： 支持库引入的方式

针对min.js进行压缩

const TerserWebpackPlugin = require("terser-webpack-plugin")
module.exports = {
      mode: "none",
      entry:{
            "large-number": "./src/index.js",
            "large-number.min": "./src/index.js"
      },
      output:{
            filename: "[name].js",
            library: "largeNumber",
            libraryExport: "default",
            libraryTarget: "umd"
      },
      optimization:{
            minimize: true,
            minimizer: [
                  new TerserWebpackPlugin({
                        include: /\.min\.js$/
                  })
            ]
      }
}

设置mode为"none",就可以实现都不压缩，然后通过插件"terser-webpack-plugin"对文件名是min.js的文件压缩

插件安装

npm install terser-webpack-plugin -D

设置入口文件

因为使用的mode是none，所以这里需要在index.js(这个不是src里的index.js)中设置文件导出的东西

if(process.env.NODE_ENV === "production"){
 module.exports = require("./dist/large-number.min.js")
}else{
 module.exports = require("./dist/large-number.js")
}