周末无事,学一下怎么发布npm 包。在网上找教程还是觉得没有比较完善、可以清楚地走完整个流程的,还有一些是github 上有demo 但是拖下来运行会报错,可能是什么插件的版本问题。于是就有了这篇文章,本文包以下含两部分的内容:
(1)如何发布一个简单的npm 包
(2)如何发布一个基于es6 编写的npm 包
1. 发布一个简单的npm 包
发布npm 包的过程实际上就是把你本地的node 项目上传,供别人使用的过程。
所以发布操作包含以下三个部分:本地创建node 项目编写代码、申请npm 账号、本地进行发布。
(1)本地创建npm 项目
① npm 项目的创建不用多说,直接使用以下命令进行创建:
mkdir npmDemo
cd npmDemo
// 此处使用-y 可以跳过后面让你填写内容操作,所有内容都是用默认值就好,有需要的话回头可以在package.json 文件中进行修改
npm init -y
② 一般会将发布的内容写在根目录下的lib 文件夹中,所以我们在lib 文件夹下新建isArr.js,写入一个简单的函数判断一个变量是否是数组:
var isArr = function() {
return Object.prototype.toString().slice(8, -1).toLowerCase() === 'array';
}
module.exports = isArr;
同时在此建立一个index.js 文件将刚刚写的函数导出:
module.exports = require('./isArr.js');
根目录下也要创建一个index.js 文件,这个文件是我们发布的包的默认入口文件,里面的内容也只是做一个导出操作:
module.exports = require('./lib');
到这里,目录结构就变成了这个样子:
(2)申请一个npm 账号
网址在这里,自己去搞:https://www.npmjs.com/
(3)发布刚刚写的包
进入项目根目录,登录刚刚申请的npm 账号
登录完成以后执行以下操作:
npm publish
此时去npm 网站上就能看到你刚刚发布的包,别人想要使用的时候使用npm install 安装即可。
PS:在发布之前可以将这整个目录扔到另一个项目的node_modules 文件夹中来测试我们写的功能是否正确。
2. 发布一个基于es6 的npm 包
因为node 的模块管理是符合CommonJs 规范的,所以从上面的代码我们也可以看到我们是使用module.exports 和require 进行导入和导出操作。那我如果想发布基于es6 编写的项目怎么办?答案是在发布之前将es6 代码转换为es5。
于是本小节场景需求如下:
使用eslint 实时编译,以便能及时发现代码中的错误和不规范之处
发布前使用babel 将es6 代码转换为es5
此时项目中已经包含了es6 和es5 的代码,而我们最终期望es5 的代码是放在lib 文件夹中的,所以我们书写es6 代码的时候是在src 文件夹中进行。
(1)eslint 实时编译
我想让eslint 实时检查我的代码,但是我不想使用webpack,因为我想要的只是eslint 的功能,使用webpack 有点杀鸡用牛刀的感觉,那要怎么办?
早有人已经给我们写好了eslint 实时编译的npm 插件:eslint-watch
npm i -D eslint-watch
.eslintrc 配置文件如下:
// 按照该配置文件执行可能会报错,需要安装其他几个插件,具体什么插件可以去文末github 的package.json 文件中去找
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
'standard'
],
rules: {
'generator-star-spacing': 'off',
'space-before-function-paren': ['error', 'never'],
'semi': ['error', 'always'],
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'indent': ['error', 2],
'eqeqeq': 'off'
}
}
package.json 中添加实时编译脚本
"esw": "esw src/* -w"
(2)使用babel 将es6 代码转换为es5
npm i -D babel
.babelrc 配置文件如下:
{
"stage": 0,
"loose": ["all"],
"blacklist": ["regenerator"],
"optional": ["bluebirdCoroutines"],
"highlightCode":true
}
package.json 中添加代码转换脚本
"babel": "babel -d lib/ src/",
配置好了以后,我们就可以在src 中编写代码,同时运行npm run esw 进行实时检查,不过我在使用这个插件的时候遇到了点问题,只有在shell 框中按一次回车状态才能更新,而不会向webpack 那样做到真正的实时检查,不知道是插件的问题还是我使用方式的问题。
写好代码以后运行npm run babel 将es6 转换为es5 放在lib 中(此时目录结构如下),之后的测试和发布流程就跟上一点一样了。
3. Github Demo
https://github.com/TerminatorSd/npmDemo
如果是自己敲的代码在运行过程中报错可以去这个demo 里看一下各个插件的版本,插件的版本确实是会有影响的。
Ref: http://mammal.io/articles/using-es6-today/
Ref: https://cnodejs.org/topic/557533b9c4e7fbea6e9a3072
Ref: https://www.jianshu.com/p/8f335a84e44d
原文:https://blog.csdn.net/qq_33594380/article/details/81409837