01-custom-library-npm

1、项目搭建

1）项目初始化安装依赖

npm init -y
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: '_',
    },
  },
}

3）配置npm script并打包构建

"build": "webpack --config webpack.config.js"

同时将package.json文件中main设置为打包构建的文件

"main": "dist/webpack-numbers.js",

2、发布流程

1）将npm的registry设置为官方的仓库（我们需要将包发布到官方仓库）

• 不能发布到taobao，taobao镜像是只读镜像，会发布失败
• 若要发布的私服，需要将仓库地址设置为私服地址

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

npm logout //登出

// 如果不知道当前登录的账号可以用who命令查看身份：
npm who am i

// 发布的包在72小时内是可以删除的
npm unpublish  <pkg>[@<version>]
npm unpublish 01-custom-library-npm@1.0.1

3、更新包

• 1、修改完包的代码后，还需要更新下package.json中的version（不能和之前的版本相同）
• 2、已经登录过了，只需使用发布命令npm publish更新包

4、发布注意问题

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

5、测试

• CommonJS：在test文件夹下创建test.js，可以使用node去运行代码

// test.js
const webpackNumbers = require('../dist/webpack-numbers')

console.log(webpackNumbers.numToWord(3));

• script 标签测试：在test文件夹下创建index.html

<body>
  <script src="../dist/webpack-numbers.js"></script>
  <script>
    console.log(webpackNumbers);
  </script>
</body>

5、webpack支持es模块引入