筱筱笔记：npm发包流程

npm发包流程

我们在开发过程中，为了开发便利，可以下载别人已经封装好了的npm包，那么如何创建自己的npm包呢？

第一步：创建账号

我们想要发布自己的npm包，首先需要在npm网站上去注册一个账号

npm网站地址：https://www.npmjs.com/
npm网站注册地址：https://www.npmjs.com/signup
注册完后，在电脑端登陆，输入注册时填写的用户名和密码，邮箱

npm login
Username: yolanda_****
Password:
Email:
Logged in as [用户名] on https://registry.npmjs.org/

第二步：npm init

创建一个npmtest文件夹，并进入此文件夹。执行npm init

输入包名(name)，作者（author）; main为你打包后的入口文件

注意：此处的author必须和你npm账号的用户名相同

例：

{"name": "npmtest","version": "1.0.0","description": "this is npm test project","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "yolanda****","license": "ISC"
}

第三步：编写包内代码

创建src目录并新建index.js文件

function sayHello() {return 'Hello world';
}
module.exports = {sayHello
}

修改package.json中的main入口为src/index.js

第四步：发布 npm publish

编写好自己的包后就可以使用npm publish发布了.

npm publish

当你出现下面的错误提示时：You do not have permission to publish “npmtest”. Are you logged in as the correct user? : npmtest，
你应该检查你的npm包是否在npm官网中已经存在了，如果是已经存在了你必须重新定义包名。

注意：每次在发布更新包时需要修改版本号，即package.json中的version；

如何发布Vue组件包

编写一个Vue组件

新建src目录，存放app.vue和index.js文件。
app.vue

<template><div>{{content}}</div>
</template>
<script>
export default {name: 'Notify',data() {},props: {content: {type: String,}}
}
</script>

index.js

import Notify from './app.vue';
export default Notify;

因为组件使用到了vue和es6语法，所以我们需要安装下面依赖，使用webpack进行打包编译

{"name": "common-notify","version": "0.0.5","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1",},"author": "yolanda_xiaoxiao","license": "ISC","devDependencies": {"babel-core": "^6.26.3","babel-loader": "7","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-plugin-transform-runtime": "^6.23.0","babel-polyfill": "^6.26.0","babel-preset-es2015": "^6.24.1","css-loader": "^2.1.1","less": "^3.9.0","less-loader": "^5.0.0","style-loader": "^0.23.1","url-loader": "^1.1.2","vue": "^2.6.10","vue-html-loader": "^1.2.4","vue-loader": "^15.7.0","vue-router": "^3.0.6","vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.10","webpack": "^4.32.2","webpack-cli": "^3.3.2"}
}

注意：webpack4.0以后的环境可以直接使用–mode进行配置
新建webpack.config.js文件

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {devtool: 'source-map',entry: './src/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'notify.min.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',query: {limit: 30000,name: '[name].[ext]?[hash]'}}]},plugins: [new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')}}),new VueLoaderPlugin()]};

注意：vue-loader 15.x以后的版本，需要使用VueLoaderPlugin进行配合使用。

配置build命令：
package.json

"scripts": {"build": "webpack --mode production --progress"
}

运行npm run build，进行编译打包
修改入口文件
package.json

main: '/dist/notify.min.js'

发布
直接运行 npm publish

具体实例代码参考地址：https://github.com/onlymyworld/common-notify.git

删除npm 包

npm unpublish [包名] --force
例如：
npm unpublish npmtest_xiao --force

筱筱笔记：npm发包流程相关推荐

简述 npm 发包流程
1. 首先注册一个npm账号官网地址:https://www.npmjs.com/ 注意:需要在邮箱中确认 2. 接着创建项目 mkdir my_modules cd my_modules npm ...
ReactJS学习笔记——npm、JSX、webpack
2019独角兽企业重金招聘Python工程师标准>>> #ReactJS学习笔记--npm.JSX.webpack [toc] React是一个JavaScript库文件,使用它的目 ...
Linux 网络层收发包流程及 Netfilter 框架浅析
本文作者:sivenzhang,腾讯 IEG 测试开发工程师 1. 前言本文主要对 Linux 系统内核协议栈中网络层接收,发送以及转发数据包的流程进行简要介绍,同时对 Netfilter 数据包过 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
Dubbo笔记 ⑤ : 服务发布流程 - Protocol#export
文章目录一.前言二.RegistryProtocol#export 1. URL解析 1.1 获取注册中心URL 1.2 获取服务URL 1.3 获取订阅URL 2. 服务暴露 3. 服务注册 4 ...
LIteOS学习笔记-7LiteOS启动流程与编译流程
LIteOS学习笔记-7LiteOS启动流程与编译流程 LiteOS启动流程 1. 启动方式 2. 启动流程硬件初始化内核初始化调试串口初始化尝试进行网络连接启动任务调度 LiteOS编译流 ...
linux 查看进程发包,Linux网络发包流程
前段时间写了Linux网络收包流程一文,没想到很多人感兴趣,现上货网络发包流程. sys_write() file->f_op->write()(sock_writev)(注0) sock ...
Hyperledger Fabric笔记3--BYFN启动流程分析
Hyperledger Fabric笔记3--BYFN启动流程分析 BYFN--构建你的第一个网络,该方案提供了一个示例Hyperledger Fabric网络,该网络由两个组织组成,每个组织都维护两 ...
linux 内核vxlan收发包流程
1.vxlan口收包处理流程前面几章详细介绍了vxlan接口的使用,而且已经知道vxlan是 MAC IN UDP中的封装,因此,在解封装之前,一切按照原有流程走,在此复习一下内核收发包流程(驱动层 ...