NPM发包流程

#一、注册登录

另外，注册完邮箱是需要验证才能发包。

# 二、封装好一个组件

根据你自己的业务需求去封装

# 三、创建项目

项目配置：

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "",
  "main": "dist/xxx.js",
  /*
  在指定默认入口main方法  main属性主要使用在引用或者开发某个依赖包的时候需要此属性的支持，不然工程中无法用import导入依赖包；
不使用main属性的话我们可能需要这样写引用：require("some-module/dist/app.js")
  */
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/runtime": "^7.15.4",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.0",
    "es6-promise": "^4.2.8",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "style-loader": "^3.3.1",
    "vue": "^2.6.14",
    "vue-hot-reload-api": "^2.3.4",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.9.8",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  }
}

入口文件配置：

import xxxx1 from './xxxx.vue'

const xxxx={
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install方法
    //项目中使用 Vue.use(xxx)
    install:function(Vue){
        Vue.component('xxxx',LoadMore1)
    }
}

export default LoadMore

# 四、webpack配置

const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require("webpack");
 
module.exports = {
    devtool: 'source-map',
    entry: path.join(__dirname, "./src/index.js"),
    //入口文件，就是上步骤的src目录下的index.js文件，
    output: {
        path: path.join(__dirname, './dist'),
        //输出路径
        publicPath: path.join(__dirname, './dist'),
        filename: 'load-more.js',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [{
                test: /.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /.js$/,
                exclude: /node_modules|vue/dist|vue-router/|vue-loader/|vue-hot-reload-api//,
                loader: 'babel-loader'
            },
            {
                test: /.(png|jpg|gif|ttf|svg|woff|eot)$/,
                loader: 'url-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        })
    ]
};

# 五、 npm提交忽略

*.yml
build/
node_modules/
src/
test/

# 六、写好 README.md

# 七、打包、

# 八、npm 登录

1.换源

npm config list 命令检查自己的npm有没有被换源
没换：metrics-registry = "https://registry.npmjs.org/"
如果换源：删除 C:\Users\你的用户名 下的 .npmrc文件

2.本地登录npm

命令行：

# 1、添加用户
npm adduser
#输入注册的用户名密码邮箱 密码输入是不显示的

# 2、登录
npm login --registry=https://registry.npmjs.org/
#这里其实可以如下简写，但如果源错了的话，就会报403，所以建议用上面这句
#再次输入注册的用户名密码邮箱

npm login

# 九、发布

# 更新版本号（首次发布可以不写，如当前版本是1.0.1，执行这个命令就会变成1.0.2）
npm version patch

# 发布版本
npm publish --registry=https://registry.npmjs.org/
# 此处可以如下简写，但这么写可能发布不到npm库
# 会导致虽然能正常使用，但无法在npm官网上搜索到
npm publish

# 十、删除

npm unpublish [包名] --force