如何发布一个库到npm仓库

我们常用的一些库,可以自行打包,发布到npm仓库。
具体步骤;
1、执行npm init -y,初始化一个package.json文件
2、完成库文件代码书写

image.png

3、创建webpack.config.js文件,查看详细配置

const path = require('path');

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "library.js",
        library: "root",        //
        libraryTarget: "umd"    //umd:表示支持amd、cmd、commonjs、es6 module、import所有这些引入方式
    },
    externals: "lodash" //防止将某些 import 的包(package)打包到 library.js 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
};

4、执行npx webpack打包
5、修改package.json文件

{
  "name": "6feel-library-test",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/library.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "飞牛",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "lodash": "^4.17.15"
  }
}

6、到npm官网创建账号
7、本地npm login登录
8、执行npm publish发布成功,完成操作。【例子在线演示】
然后就可以npm i 6feel-library-test进行安装了;

调用时注意,webpack.config.js中配置了externals: "lodash",表示lodash这个包没有被打包在./dist/library.js中,所以还需要引入lodash;

import _ from "lodash";
import  6feel-library-test from " 6feel-library-test";

你可能感兴趣的:(如何发布一个库到npm仓库)