第一次发布自己的npm包

背景

在做表单的时候，会遇到很多的表单项的验证工作，几乎很多验证都是重复的，有一个比较好的lodash库来做了这些工作，但是里面有些方法和实际的业务工作有些不符。比如，lodash.isEmpty(2) // true是会认为是空的。这显然与实际的业务是不符的。另外还有一些数字校验等其他的常用的校验方法，想结合lodash做一个自己的库，这样比较有利于业务的开发。

基于以上的考量，准备开一个自己的jsUtils库。

实践

1. 新建个npm账号

在npmjs上注册一个自己的账号。

2. npm init

新建一个项目，cd进去，然后执行npm init来初始化项目的配置。

配置项：

• name：填写你这个包的名字，默认是你这个文件夹的名字。不过这里要着重说一下，最好先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 你要取的名字，如果报错，那么很好，npm上没有跟你同名的包，你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸，改名字吧。。。
• version：你这个包的版本，默认是1.0.0
• description：其实我也不知道是什么，按回车就好了。。。，这个用一句话描述你的包是干嘛用的，比如我就直接：‘a plugin for * express.register routes base on file path’
• entry point：入口文件，默认是Index.js，你也可以自己填写你自己的文件名
• test command：测试命令，这个直接回车就好了，因为目前还不需要这个。
• git repository：这个是git仓库地址，如果你的包是先放到github上或者其他git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，* * npm会读到这个目录作为这一项的默认值。如果没有的话，直接回车继续。
• keyword：这个是一个重点，这个关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。我这个包嘛，第一是在* express下工作的，然后又是一个插件plugin，然后又是一个注册路由route用的，而这个路由又是基于文件目录dir，所以很好就得出我的包的索引关键字。
• author：写你的账号或者你的github账号吧
• license：这个直接回车，开源文件来着。。。 然后它就会问你Are you ok?

回车Ok！ 然后我们回到我们的文件目录里面去看一看，发现多出来一个package.json文件，点进去基本上就是下面这张图输出的信息。

{
  "name": "jsutils-100",
  "version": "1.0.1-alpha.2",
  "author": "spring.hehe.v5",
  "dependencies": {
    "lodash": "^4.17.10"
  },
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^23.5.0"
  },
  "description": "在 lodash 基础上扩展的一些 jsUtils",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/springHyc/jsUtils.git"
  },
  "keywords": [
    "jsUtils"
  ],
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/springHyc/jsUtils/issues"
  },
  "homepage": "https://github.com/springHyc/jsUtils#readme"
}

3. 写项目

首先入口文件是index.js，或者是你刚才修改了那个entry point的值，那么你这个文件名也跟着改为那个值。

image.png

因为我把封装好的代码都扔在lib里面，所以，index.js里面也就一句话：

module.exports = require("./src");

而大多数的包里面写的是module.exports=require('./lib')。这个需要找下原因。

然后写个readme.md文件就可以执行npm publish命令啦。

遇到的问题

由于我采用的es6的语法，直接发布没问题，但是应用到项目中，项目打包发布时就会出现语法错误。

image.png

出错的地方就就是es6的...目前不能用到对象中。like this:

image.png

所以需要引入babel来将es6转化一下，一开始只用的babel-preset-es2015这个的转化还是不行，仍然是报错，最终使用的转化强度更大的babel-preset-stage-0来能够彻底转化。

like:

image.png

遗留问题

1. 发布时，是发布的lib下的转化文件，那么需要添加一个package.json文件才能发布的，每次手动添加总是麻烦，准备写一个命令才搞定。期待中... 也是自己向【大前端】迈进的第一步，come on !!!
2. 为什么项目中需要使用

const lodash = require("lodash");
const jsUtils = {};
module.exports = jsUtils;

这样的方式来组织文件呢？为什么用import lodash from "lodash"在执行npm test时会报错呢？