在做表单的时候,会遇到很多的表单项的验证工作,几乎很多验证都是重复的,有一个比较好的lodash库来做了这些工作,但是里面有些方法和实际的业务工作有些不符。比如,lodash.isEmpty(2) // true
是会认为是空的。这显然与实际的业务是不符的。另外还有一些数字校验等其他的常用的校验方法,想结合lodash做一个自己的库,这样比较有利于业务的开发。
基于以上的考量,准备开一个自己的jsUtils库。
在npmjs上注册一个自己的账号。
新建一个项目,cd进去,然后执行npm init
来初始化项目的配置。
配置项:
回车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"
}
首先入口文件是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
package.json
文件才能发布的,每次手动添加总是麻烦,准备写一个命令才搞定。期待中... 也是自己向【大前端】迈进的第一步,come on !!!const lodash = require("lodash");
const jsUtils = {};
module.exports = jsUtils;
这样的方式来组织文件呢?为什么用import lodash from "lodash"
在执行npm test
时会报错呢?