element用脚本自动化构建新组件的实现示例

目录
  • 背景
  • element-ui的自动化构建是怎么做的
    • makefile
    • new.js
    • file-save
  • 引用资源文件的修改
    • fs.createWriteStream
  • 总结

背景

在公司的项目中,每次碰到新需求的时候,你是不是都还在用新建页面 => 往页面中添加内容,如vue模板 => 添加路由。难道不觉得麻烦吗?如果是的话,不妨试试自动化构建吧,太香了~

element-ui的自动化构建是怎么做的

在开源项目中,特别是UI库的开发,有太多人协同,每个人的code习惯也都不一样。并且UI库中每个组件都还会涉及到多语言、单元测试、路由、组件的readme.md文档等文件。所以如果每次都慢慢去创建这些则太麻烦了,并且多人修改公共文件如路由文件会产生非常多的冲突。所以在开源项目中都会有非常多的脚本,去自动化生成某些文件。

makefile

在element-ui项目根目录有个makefile文件,每条命令的作用都在注释中。windows用户要使用make命令执行脚本得下载。mac用户不需要。

@# 默认的#注释会在日志中输出,@#则不会
@# .PHONY的作用: 在下方的脚本命令中忽略检查是否与dist、test目录冲突,也就是说无论如何都会去执行命令
.PHONY: dist test

@# 执行make命令时,默认执行help脚本
default: help

@# 执行`make build-theme`就是执行`npm run build:theme`脚本,
@# : 冒号前面为执行的命令,冒号后面第二行第一个应该为一个tab,tab之后跟脚本命令
@# 也就是说下面的为 'tab+npm npm build: theme'
# build all theme
@# 上面的build theme注释可以查看下方的截图,会在日志中输出
build-theme:
 npm run build:theme
install:
 npm install
dev:
 npm run dev
@# $()为使用函数
@# $@ 为当前命令本身比如 'make new',$@ 就是 new
@# MAKECMDGOALS 特殊变量,该变量记录了命令行参数指定的目标列表,也就是说使用这个变量,我们可以得到命令行的参数
@# 比如我们在创建新组件时,使用脚本`make new wailen` MAKECMDGOALS 就等于 wailen
@# filter-out 反过滤函数,过滤掉 $(MAKECMDGOALS) 中所有含有 $@ 的内容
@# 结合new.js的内容,下方脚本的意思也就是创建新组建,传入组件名称,组件名称不得为new,如果组件名称取为new,可以查看下方截图
new:
 node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS))
@# 省略了一些脚本,感兴趣的可以自行查看源码
help:
 @echo "   \033[35mmake\033[0m \033[1m命令使用说明\033[0m"
 @echo "   \033[35mmake install\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  安装依赖"
 @echo "   \033[35mmake new <component-name> [中文名]\033[0m\t---  创建新组件 package. 例如 'make new button 按钮'"
 @echo "   \033[35mmake dev\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  开发模式"
 @echo "   \033[35mmake dist\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  编译项目,生成目标文件"
 @echo "   \033[35mmake deploy\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  部署 demo"
 @echo "   \033[35mmake pub\033[0m\t\033[0m\t\033[0m\t\033[0m\t---  发布到 npm 上"
 @echo "   \033[35mmake new-lang <lang>\033[0m\t\033[0m\t\033[0m\t---  为网站添加新语言. 例如 'make new-lang fr'"

# 注释输出

过滤new关键字,当传入参数为new时,过滤掉

当然,如果不想使用make直接执行node脚本即可,比如make new 组件名 等同于 node build/bin/new.js 组件名

new.js

new.js为自动化的核心文件。我们先思考一下,创建组件文件无非就是两个步骤

  • 创建文件
  • 添加内容

file-save

主要是通过file-save这个包创建文件并添加内容。先来看看api

const fileSave = require('file-save');
const content = "const fs = require('fs');"
const callback = () => { console.log('脚本执行') }
fileSave('文件路径')
   .write('文件内容比如上面的content', 'utf8', callback) // 内容写入成功会触发回调
   .write('继续添加content','utf8')
   .end('\n') // 文件操作结束,以空白行结束

如此便会生成如下文件

更多的文档可以查看file-save

element-ui中就是先通过一个Files数组对象管理了需要创建的filename以及code content。

这样直接循环Files就能创建对应的文件了。

// 创建 package
// 组件生成的目录
const PackagePath = path.resolve(__dirname, '../../packages', componentname);
Files.forEach(file => {
  fileSave(path.join(PackagePath, file.filename))
    .write(file.content, 'utf8')
    .end('\n');
});

引用资源文件的修改

另外,一般创建了组件还需要修改相应需要引用组件的地方,比如路由配置文件等。我们同样可以通过file-save去添加对应的路由。本身file-save会覆盖之前文件中的内容,也就是删除过后重新再次生成。所以如果是在原有基础上做增的操作的话,就需要获取到原有文件的内容,再在此基础上拼接新内容。我们可以这样做:

const fileSave = require('file-save');
const fs = require('fs');

const content = `const fileSave = require('file-save'); `
const oldCode = fs.readFileSync('./demo.js')
fileSave('demo.js')
  .write(oldCode+content, 'utf8')
  .end('\n')

也就是通过fs模块读取到文件的旧内容,再拼接即可。element-ui是这么做的:

fs.createWriteStream

file-save原理就是通过fs.createWriteStream这个api做了一层封装。
简单说下使用

const fs = require('fs')

//创建可写流 fs.WriteStream 类的对象,继承自 <stream.Writable>
const writer = fs.createWriteStream('createStream.js', { // 查找该文件,没有则创建
    //默认值为w, 通过调用writer.write方法写入数据的时候,会直接覆盖文件所有的内容,
    // 即会把文件之前的内容全部再删除,写入新的数据
    flags: 'w'
})

//写入数据到流
writer.write('这个文件的新内容')

file-save的源码内容可以查看下面的伪代码。

const savefs = {}
savefs._create_dir = function (fp, opts) {
  mkdirp.sync(fp, opts);
}
savefs.wstream = function (file) {
  var ws = fs.createWriteStream(file);
  this.writer = ws;
  return this;
}
savefs.write = function(chunk, encoding, cb) {
  ...
}

savefs.end = function(chunk, encoding, cb) {
  ...
}

savefs.finish = function(cb) {
  ...
}

savefs.error = function(cb) {
  ...
}
export { savefs }

当然,其实我们可以直接使用node的fs.writeFile这个API去创建文件,

fs.writeFile('文件路径','要写入的内容',['编码'],'回调函数');

可以发现参数跟file-save一样

总结

归根到底,自动化创建组件无非就是两个核心创建文件 添加内容。通过file-save这个包就可以实现这两个操作,然后我们再结合自身的业务,配置好生成文件的路径与内容,以及做好某些公共文件对新文件资源引用的修改即可。有没有觉得node写脚本,比写后端有意思多了~

到此这篇关于element用脚本自动化构建新组件的实现示例的文章就介绍到这了,更多相关element脚本自动化构建新组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue基于Element构建自定义树的示例代码

    说明 做项目的时候要使用到一个自定义的树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式,于是基于它封装了一个可以增.删.改的树形组件,现在分享一下它的使用与实现. 控件演示 github上挂的gif可能会比较卡,有没有大佬知道还有哪里可以挂静态资源的,谢谢..! 控件使用 概要 基于element-ui树形控件的二次封装 提供编辑.删除节点的接口 提供一个next钩子,在业

  • element用脚本自动化构建新组件的实现示例

    目录 背景 element-ui的自动化构建是怎么做的 makefile new.js file-save 引用资源文件的修改 fs.createWriteStream 总结 背景 在公司的项目中,每次碰到新需求的时候,你是不是都还在用新建页面 => 往页面中添加内容,如vue模板 => 添加路由.难道不觉得麻烦吗?如果是的话,不妨试试自动化构建吧,太香了~ element-ui的自动化构建是怎么做的 在开源项目中,特别是UI库的开发,有太多人协同,每个人的code习惯也都不一样.并且UI库中

  • Vue自动化注册全局组件脚本分享

    目录 自动化注册全局组件 放代码 vue组件注册–全局注册 使用require.context实现前端工程自动化(实现全局组件自动化注册的js脚本) 基本思路 使用场景 自动化注册全局组件 今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比如components下的文件,自动完成全局化注册,想起来就很帅 放代码 export function au

  • 浅谈Webpack自动化构建实践指南

    由于现在的博客是使用wordpress搭建,自己得经常修改过一些代码,但是修改第三方源码真的比较痛苦,于是决定计划开始使用React + Node.js / Python开发新博客项目,最终替换当前博客代码,方便以后博客的维护和更新,也能实现自我开发技术,架构设计,解决问题能力的提升,同时记录下整个开发历程,总结,分享,希望能与读者们一起进步.本篇介绍如何使用Webpack和Babel,Eslint,documentation.js等搭建项目开发环境和生产环境,也算项目的准备工作,下一期计划介绍

  • gulp加批处理(.bat)实现ng多应用一键自动化构建

    批处理 常用常见的批处理文件有.bat文件,可用文本编辑器直接编辑内部代码,运行也比较方便,windows平台直接双击执行即可,具体请自行了解. 需求背景 angular项目中,当项目越来越大时,很多通用模块(module)可能需要抽象出来,这是一点,另外可能有某些子应用也会单独抽离出来,这是另一点. 当一个大型项目同时包括多个子应用时,编码后的编译或者打包就会比较麻烦,特别是在项目持续集成的一种状态下,或者项目组有新成员(经验稍微薄弱)情况下. 需要了解 看下面的代码之前,如果您是angula

  • nodejs前端自动化构建环境的搭建

    为了UED前端团队更好的协作开发同时提高项目编码质量,我们需要将Web前端使用工程化方式构建: 目前需要一些简单的功能: 1. 版本控制     2. 检查JS     3. 图片合并     4. 压缩CSS     5. 压缩JS     6. 编译SASS 这些都是每个Web项目在构建.开发阶段需要做的事情.前端自动化构建环境可以把这些重复工作一次配置,多次重复执行,极大的提高开发效率. 目前最知名的构建工具: Gulp.Grunt.NPM + Webpack:     grunt是前端工

  • 详解Android的自动化构建及发布

    在一个App从开发到测试的过程中,我有很长一段时间都是这样做的:打包,上传到tower,在tower上编写本次更新说明,通知测试.一般情况下,打包及上传的过程大概也就2分钟.除此之外,由于项目代码有作混淆,并且使用了bugly,因此在发出每个版本之后还需要将混淆的mapping.txt传到bugly上.当日复一日,并且有时还遇到网络较差的情况时,这种人工手动的工作方式就很影响工作效率及心情了.因此,自动化构建及发布就成了必须掌握的技能了. 本篇分享的是我在Android自动化构建的一些经验,涉及

  • Android中的RecyclerView新组件初步上手指南

    介绍 RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用户只要实现自己的viewholder就可以了,该组件会自动帮你回收复用每一个item. 它不但变得更精简,也变得更加容易使用,而且更容易组合设计出自己需要的滑动布局. RecyclerView与ListView原理是类似的:都是仅仅维护少量的View并且可以展示大量的数据集.RecyclerView用

  • 使用Jenkins自动化构建工具进行敏捷开发

    目录 一.序言 二.安装与使用 (一)安装 1.查看初始密码 2.修改默认工作空间 (二)使用 1.构建配置 2.添加项目 (三)免密登录 三.触发策略 (一)定时触发 (二)URL 触发 (三)钩子触发 附录.工具使用 1.语言设置 2.构建环境清单 3.环境配置 4.任务配置 一.序言 Jenkins 是一款自动化构建工具,能够基于 Maven 构建后端 Java 项目,也能够基于 nodejs 构建前端 vue 项目,并且有可视化 web 界面. 所谓自动化构建是按照一定的策略执行打包脚本

  • Docker基于现有镜像构建新镜像的实现方法

    由现有镜像构建新镜像都是通过Dockerfile文档来实现的. 1.新建Dockerfile文档 在/home文件夹下新建一个文件夹,专门用来测试的,/docker/test文件夹,在文件夹中新建一个Dockerfile文档,文档中写入以下内容: FROM ubuntu:18.04 RUN apt-get update RUN apt-get install -y vim EXPOSE 80 Dockerfile文档中,每行的第一个关键字都必须大写. 第一行的意思是新建镜像的源镜像是Ubuntu

  • 使用 Vue cli 3.0 构建自定义组件库的方法

    本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路:包括如何快速并优雅地构建UI库的主页.如何托管主页.如何编写脚本提升自己的开发效率.如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分: 组件库本身的代码:这部分代码会发布到 npm 上 预览示例和查看文档的网站代码:类似 Vant.ElementUI 这类网站. 配置文件和脚本文件:用于打包和发布等等 编写此博文的灵感 UI 框架库( vue-cards ),PS:此 UI框架库相对于Vant.Elem

随机推荐