01-custom-library-npm

1、项目搭建

1）安装依赖

npm i webpack webpack-cli lodash -D

2）配置webpack

• 将项目中使用lodash也打包进项目中，增大了项目的体积（不推荐）

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: 'webpack-numbers.js',
    library: {
      // library 向外暴露的对象名
      name: 'webpackNumbers',
      // 兼容不同的环境 CommonJS、AMD、Node.js 等
      type: 'umd',
    },
  },
}

• 将lodash等第三方包外部化，由用户安装（推荐）

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    filename: 'webpack-numbers.js',
    library: {
      // library 向外暴露的对象名
      name: 'webpackNumbers',
      // 兼容不同的环境 CommonJS、AMD、Node.js 等
      type: 'umd',
    },
  },

  // 外部扩展：https://webpack.docschina.org/configuration/externals/#externals
  externals: {
    lodash: {
      commonjs: 'lodash',
      commonjs2: 'lodash',
      amd: 'lodash',
      root: '_',
    },
  },
}

2、发布流程

1）将npm的registry设置为官方的仓库

npm config get registry

// 发布library需要使用官方仓库
npm config set registry https://registry.npmjs.org
npm config set registry https://registry.npm.taobao.org

2）在终端中登录npm

• npm login输入用户名、密码和邮箱登录npm

3）发布library到npm

• 使用命令：npm publish

3、发布注意问题

• 1、必须将registry设置为官方仓库，否则发布失败
• 2、每次修改后重新发布，需要修改package.json中的版本号