从 0 到 1 到完美,写一个 js 库、node 库、前端组件库
之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术,这次说说怎么写一个完美的第三方库。
1. 选择合适的规范来写代码
js
模块化的发展大致有这样一个过程 iife => commonjs/amd => es6
,而在这几个规范中:
iife
:js
原生支持,但一般不会直接使用这种规范写代码amd
:requirejs
定义的加载规范,但随着构建工具的出现,便一般不会用这种规范写代码commonjs
:node
的模块加载规范,一般会用这种规范写node
程序es6
:ECMAScript2015
定义的模块加载规范,但到目前为止,几乎所有的js
运行环境都不支持,包括浏览器、node
(包括electron
、nw.js
)、React Native
等
针对原生不支持任何规范的运行环境程序(如浏览器、React Native
),建议使用 es6
规范来写代码,然后由工具转换成原生 js
能够运行的。
而针对 node
程序,可以直接用 commonjs
规范来写,也可由 es6
规范来写,然后用工具转化成 commonjs
规范。
所以,总的来说,都可以使用 es6
规范来写代码,然后用工具转换成其他规范,而且 es6
的代码可以使用 tree-shaking
功能。
参考:
2. 选择合适的构建工具
对于前端项目来说,因为有静态资源(如图片、字体等)加载与按需加载的需求,所以使用 webpack
是不二选择,但对于第三方库来说,其实还有更好的选择:rollup
。
可以查看 webpack 之外的另一种选择:rollup 了解 webpack
与 rollup
之间各自的差异与优势。
webpack
在打包成第三方库的时候只能导出 amd/commonjs/umd
,而 rollup
能够导出 amd/commonjs/umd/es6
。使用 rollup
导出 es6
模块,就可以在使用这个库的项目中构建时使用 tree-shaking
功能。
对于有样式文件(css
、less
、scss
)、静态资源文件(图片、字体)的前端组件来说,可以使用 rollup-plugin-postcss 插件配合 rollup
处理样式文件与静态资源文件。
参考:
- webpack、rollup、rollup-plugin-postcss
- webpack 之外的另一种选择:rollup
- UMD (Universal Module Definition)
- tree-shaking
- webpack 如何优雅的使用tree-shaking(摇树优化)
3. 定好目录结构
一般库项目的目录:
|-- / # 项目根目录
|-- src/ # 源代码目录
|-- lib/(dist/) # 发布文件目录 |-- test/ # 测试文件目录
|-- ... # 更多其他目录
如果是多包项目(一个项目里有多个 npm packages,比如 babel):
|-- / # 项目根目录
|-- packages/ # packages 目录
|-- pkg1/ # package1 目录
|-- src/ # 源代码目录
|-- lib/(dist/) # 发布文件目录
|-- pkg2/ # package2 目录
|-- src/ # 源代码目录
|-- lib/(dist/) # 发布文件目录 |-- ...
后面会详细讲解多包项目。
4. 搭建一个好的脚手架
不管是应用项目还是第三方库项目,都需要搭建一个好的脚手架,来帮助我们更好的编写代码、构建项目等。
可以查看 搭建自己的前端脚手架 了解一些基本的脚手架文件与工具。
比如:
.editorconfig
: 用这个文件来统一不同编辑器的一些配置,比如tab
转 2 个空格、自动插入空尾行、去掉行尾的空格等,http://editorconfig.org- eslint、stylelint、prettier: 规范化代码风格、优化代码格式等
- husky、lint-staged: 在
git
提交之前对代码进行审查,否则不予提交 .travis.yml
: 一个很棒的持续集成服务,https://www.travis-ci.org/
详细的文件、工具与配置,参考 搭建自己的前端脚手架。
另外,针对开源的第三方库,还可以有:
LICENSE
: 协议文件CONTRIBUTING.md
: 项目代码参与者codecov.yml
: 测试覆盖率配置文件.github
:github
上的一些自定义配置,比如issue
模板、pr
模板等/docs
: 文档目录/examples
: 使用示例目录/scripts
: 脚本目录
加上 rollup
的配置文件 rollup.config.js
:
rollup.config.js
如果是 node
程序,把 es6
规范转化成 commonjs
规范:
export default {
input: 'src/index.js',
output: {
file: 'lib/index.js',
format: 'cjs',
},
};
如果是前端库,还需要转 es6+
到 es5
、导出不同规范的文件(es6/commonjs/amd/umd
):
import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss'; export default [
{
file: 'lib/cjs.js',
format: 'cjs',
},
{
file: 'lib/m.js',
format: 'esm',
},
{
file: 'lib/umd.js',
format: 'umd',
name: 'Name',
},
{
file: 'lib/amd.js',
format: 'amd',
},
].map(output => ({
input: 'src/index.js',
output,
plugins: [
babel({
presets: ['@babel/preset-env'],
}),
postcss({ extract: !0 }), // 构建样式文件时需要这个插件
],
}));
.gitignore
一般来说,我们并不希望把发布文件放到 git
的版本控制之中,而只是发布到仓库而已,所以:
# .gitignore .DS_Store
node_modules
bower_components
/coverage
*.log
.idea
.vscode
.eslintcache
package-lock.json /lib # 把 lib 排除在外
/packages/*/lib # 多包项目
package.json
{
...
# node 项目
"main": "lib/index.js", # 前端项目
"main": "lib/cjs.js", # commonjs 规范文件
"module": "lib/m.js", # es6 规范文件
"umd:main": "lib/umd.js", # umd 规范文件
"amd:main": "lib/amd.js", # amd 规范文件 "files": [ # 发布时只发布 lib 目录下文件
"lib"
],
"scripts": {
...
"build": "rollup -c", # 构建发布文件
"prepublishOnly": "npm run build", # npm publish 之前先 npm run build
"pretest": "npm run build", # npm run test 之前先 npm run build
},
...
}
在实际项目中,构建工具(如 webpack
)会首先找这个包中的 module
字段对应的 es6
规范文件,并使用 tree-shaking
;如果不存在,然后找 main
字段对应的文件。
有些构建工具可能也会用 amd
规范文件与 umd
规范文件。
参考:
5. 构建多包项目
如果一个项目很大,需要分割成多个 npm
包进行管理,但这些包仍然在一个项目里,并且这些包可能有相互依赖关系,这个时候就比较难以管理和开发了。
为了方便的管理多包项目,lerna 便应运而生,babel、create-react-app、jest、lila 等都是用 lerna
来管理多个包的。
英文不好的童鞋,可以参考 使用lerna管理大型前端项目,了解 lerna
的一些基本用法。
lerna 一般目录文件结构
my-lerna-repo/
package.json
packages/
package-1/
package.json
package-2/
package.json
安装 lerna,初始化项目
# 安装
npm i -g lerna
# 初始化
git init lerna-repo && cd lerna-repo
lerna init
# 初始化后的目录及文件
lerna-repo/
packages/
package.json
lerna.json
配置文件 lerna.json
{
"version": "0.5.2", # 当前版本号
"packages": [
"packages/*"
],
"command": {
"publish": { # 发布配置
"ignoreChanges": [ # 哪些文件变动不会引发发布新版本
"*.md",
"*.json",
"*.txt",
"test/**",
"example/**",
"package.json"
]
},
"bootstrap": {
"npmClient": "cnpm" # lerna bootstrap 时使用哪个 npm 客户端
}
},
"npmClientArgs": [ # npm 客户端 运行时的参数
"--no-package-lock"
]
}
常用命令
lerna publish
: 发布所有有更新的包
在默认的固定模式(Fixed mode)下,这个命令会检查 packages
目录下哪些包的文件有更新(lerna.json
中 command.publish.ignoreChanges
除外),然后把 lerna.json
中的 version
与有更新的包中 package.json
的 version
字段更新到一个新的版本号上,最后把这些有更新的包都发布到远程仓库上。
lerna bootstrap
: 启动建立包相互之间的 node_modules
链接
这个命令会根据各个包下 package.json
里面的 dependencies
和 devDependencies
配置,使用 symlink
在各个包的 node_modules
下面建立引用关系。这样就解决了相互之间有依赖而无法联调的问题。
lerna changed
: 查看哪些包有更新,可以发布一个新的版本
lerna diff [package?]
: 查看包都更新了些什么
lerna run [script]
: 使用 npm
运行每个包下面的 [script]
参考:
6. 示例
单个包的 node
项目可以参考我的项目:sclean
单个包的前端项目可以参考我的项目:see-fetch
多个包的项目可以参考我的项目:lila
后续
更多博客,查看 https://github.com/senntyou/blogs
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
从 0 到 1 到完美,写一个 js 库、node 库、前端组件库的更多相关文章
- Vue折腾记 - (3)写一个不大靠谱的typeahead组件
Vue折腾记 - (3)写一个不大靠谱的typeahead组件 2017年07月20日 15:17:05 阅读数:691 前言 typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的ty ...
- 让我们纯手写一个js继承吧
继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...
- 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑
eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...
- 从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
前言 最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出 ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 如何手写一个js工具库?同时发布到npm上
自从工作以来,写项目的时候经常需要手写一些方法和引入一些js库 JS基础又十分重要,于是就萌生出自己创建一个JS工具库并发布到npm上的想法 于是就创建了一个名为learnjts的项目,在空余时间也写 ...
- 【转载】写一个js库需要怎样的知识储备和技术程度?
作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...
- 如何写一个Js上传图片插件。
项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了 不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...
- 【Part1】用JS写一个Blog(node + vue + mongoDB)
学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...
随机推荐
- JSTL与EL表达式(为空判断)
JSTL与EL表达式(为空判断) 一.循环遍历集合 1.在jsp中引入标准函数声明 <%@ taglib uri="http://java.sun.com/jsp/jstl/cor ...
- 中后缀表达式/洛谷P1175 表达式的转换
P1175 表达式的转换 思路:先用栈转成中缀表达式,再用栈进行计算.要输出过程,因此计算一次输出一次,但是栈没有迭代器,不好用,换成vector(可以pop_back).虽然表达式求值也可以这么做, ...
- 将list等分成n份
public static <T> Map<Integer, List<T>> spiltList(List<T> list, int num) { M ...
- http与socket
http是一个应用层的协议 socket不是一个协议,而是一个编程(API)接口
- CodeForces 1000A Codehorses T-shirts(STL map、思维)
https://codeforces.com/problemset/problem/1000/A 题意: 有n个人,给出每个人的衣服的尺码,现在,将这n件衣服的尺码换成另外的n种尺码,如果有尺码一样的 ...
- 干货 | 基于Go SDK操作京东云对象存储OSS的入门指南
前言 本文介绍如何使用Go语言对京东云对象存储OSS进行基本的操作,帮助客户快速通过Go SDK接入京东云对象存储,提高应用开发的效率. 在实际操作之前,我们先看一下京东云OSS的API接口支持范围和 ...
- 查找ARP攻击源
问题: 内网有电脑中了ARP病毒,但是网络拓扑比较复杂.电脑数量较多,排查起来很困难.有什么方法可以找出ARP攻击源?[推荐3]排查方法: 1.使用Sniffer抓包.在网络内任意一台主机上运行抓包软 ...
- 指针数组的初始化和遍历,并且通过for循环方式、函数传参方式进行指针数组的遍历
/************************************************************************* > File Name: message.c ...
- opencv摄像头捕获视频
1.ord()函数:它以一个字符(长度为1的字符串)作为参数,返回对应的 ASCII 数值,或者 Unicode 数值,如果所给的 Unicode 字符超出了你的 Python 定义范围,则会引发一个 ...
- JavaWeb之Servlet入门(一)
1. Servlet介绍 Servlet(Server Applet),全称Java Servlet,是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. 2. ...