专栏首页贺贺的前端工程师之路第一次发布自己的npm包

第一次发布自己的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时会报错呢?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GIT 安装

    上面是国内某牛人的git介绍。想详细了解git的同学可以访问一下的网址,花几分钟的时间学习一下世界上最先进的分布式版本控制系统!

    贺贺V5
  • npm adduser报错解决

    执行npm adduser的时候总是报错,说账号或者密码不对,但是我很确定账号、密码是正确的。

    贺贺V5
  • 浅谈Hooks&&生命周期(2019-03-12)

    现在流行的前端框架,无论是angular还是React,又或是Angular2以及以上,都由框架自身提供了生命周期(有的叫生命周期钩子)供开发者使用。

    贺贺V5
  • 产业协同是关键 | ISC 2018互联网安全大会Day 2直击

    9月5日,天气晴。ISC 2018互联网安全大会产业峰会在北京国家会议中心主会场举行。

    FB客服
  • gitea开机启动

    今天搭建gitea环境的时候突然想到,如果gitea可以开机启动那该多好,找了一下,官方文档上就有

    bboysoul
  • Git合并指定commit到当前分支

    有时我们需要将指定的某一次commit合并到当前分支,比如线上的一次bugfix,只合并需要的commits。

    JouyPub
  • 图解精选 TOP 面试题 002 | LeetCode 104. 二叉树的最大深度

    题目要求求出二叉树的最大深度,我们知道,每个节点的深度与它左右子树的深度有关,且等于其左右子树最大深度值加上 1,可以写作:

    江不知
  • 通过10张图介绍,分布式架构如何演进!

    透明性:是指每一个数据库分布节点对用户的应用来说都是透明的,看不出是本地还是远程。

    搜云库技术团队
  • 图解分布式架构的演进!

    Java技术栈
  • 图解精选 TOP 面试题 002 | LeetCode 104. 二叉树的最大深度

    题目要求求出二叉树的最大深度,我们知道,每个节点的深度与它左右子树的深度有关,且等于其左右子树最大深度值加上 1,可以写作:

    帅地

扫码关注云+社区

领取腾讯云代金券