Skip to main content

发布包到npmjs.org

note

发布代码前请确保代码测试通过

更新package.json文件#

修改package.json中项目版本号#

  • （1）、将package.json中版本号改为0.0.1 意为最基础的版本，只有是大而全的版本才建议用大于零的数字开头

  • （2）、项目根目录下创建index.js,在index.js文件中导出想要的全部内容 ，然后再package.json中设置入口文件为"main": "index.js"

  • （3）、在index.js文件中导出想要的全部内容 

      import Button from "./src/button.vue"  import ButtonGroup from "./src/button-group.vue"  import Icon from "./src/icon.vue"
  export { Button, ButtonGroup, Icon }

注册npm账号#

进入官网注册账号：npm

登录发布npm包#

本地项目登录npm#

项目下打开命令行运行npm adduser 回车后按要求输入刚才注册的登录名密码及邮箱

注意再输入npm adduser之后你可能会报错因为国内一般会切换npm源为淘宝，我们要将其注释掉请往下看
npm adduserUsername: zjiaahuiPassword:Email: (this IS public) zjiaahui@foxmail.comLogged in as zjiaahui on https://registry.npmjs.org/.

登入后发布#

npm publish

切换npm下载源#

（1）、输入npm config list 查看userconfig后的地址-》打开指向的文件，将 里面的淘宝源注释掉

（2）、通过nrm管理切换npm的下载源

更新/删除npm包#

（1）、更新包时需要先修改package.json文件中的版本号

npm publish

（2）、删除npm发布的包 npm unpublish --force <包名> 强制删除

npm unpublish --force <包名>

自行测试使用发布的包#

npm i <包名>

（1）、根目录下的index.js文件导入导出组件的语法使用的是ES6 modules模块话语法，nodejs的模块化语法是 commonJS ，因此发布前需要使用babel转译

webpack.common.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {    entry: {        app: './src/index.js',    },    plugins: [        new HtmlWebpackPlugin({            //复制'./src/index.html'文件，并自动引入打包输出的资源文件（js/css）            template: './src/index.html',        }),        new VueLoaderPlugin()    ],    output: {        filename: '[name].bundle.js',        path: path.resolve(__dirname, 'dist'),        clean: true,    },    module: {        rules: [            {                test: /\.vue$/,                loader: 'vue-loader'            },            {                test: /\.s[ac]ss$/i,                use: [                    // Creates `style` nodes from JS strings                    "style-loader",                    // Translates CSS into CommonJS                    "css-loader",                    // Compiles Sass to CSS                    "sass-loader",                ],            },+           {+               test: /\.m?js$/,+               exclude: /node_modules/,+               use: {+                   loader: 'babel-loader',+                   options: {+                       presets: [+                           ['@babel/preset-env', { targets: "defaults" }]+                       ]+                   }+               }+           }        ]    },    resolve: {        alias: {            'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的        }    }};
文章目录