发布自己的npm包

注册npm账户

---

• 注册地址

用户名，密码，邮箱后面发布会用到 注册完需要验证邮箱 会发送邮件至你注册的邮箱 按指示完成验证即可

新建项目

---

创建目录

代码语言：javascript复制

mkdir package

切换目录

代码语言：javascript复制

cd package

初始化npm

代码语言：javascript复制

npm init -y

后续可在 package.json 文件中增加更改配置

安装ESlint

---

安装

代码语言：javascript复制

npm i eslint

初始化配置

代码语言：javascript复制

eslint --init

配置 Commitlint

---

安装 Commitlint 脚手架和 Git Hook 工具

代码语言：javascript复制

npm install @commitlint/cli @commitlint/config-conventional husky --save-dev

根目录创建 .commitlintrc.js 文件

代码语言：javascript复制

module.exports = {
  extends: ['@commitlint/config-conventional']
}

配置 Git Hook

代码语言：javascript复制

// package.json

"husky": {
  "hooks": {
    "pre-commit": "eslint src --fix --ext .js",
    "commit-msg": "commitlint -e"
  }
}

打包、编译

---

webpack babel

代码语言：javascript复制

npm install webpack webpack-cli --save-dev
npm install @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime @babel/runtime-corejs3 --save-dev

根目录创建 webpack.config.js 配置babel-loader

代码语言：javascript复制

const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
		library: 'package',
		libraryTarget: 'umd',
	},
	module: {
		rules: [{
			test: /.js$/,
			loader: 'babel-loader',
			exclude: /node_modules/,
		}]
	}
}

根目录创建 .babelrc

代码语言：javascript复制

{
  "presets": [
    ["@babel/preset-env"]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime", {
      "corejs": 3
    }
    ]
  ]
}

开发

---

新建 src 目录 创建index.js

发布

---

代码语言：javascript复制

npm login

依次输入用户名 密码 邮箱

代码语言：javascript复制

npm publish

包名不能重复并合法 使用官方源 npm config set registry http://registry.npmjs.org 注册npm的邮箱需要验证

npm webpack git javascript 打包

0 人点赞