脚手架

一、脚手架是什么脚手架是一种基础设施工具，用于疾速生成我的项目的框架代码和文件构造。它是一种标准化的开发工具，使开发人员可能在我的项目的晚期阶段疾速搭建出一个具备基本功能和构造的零碎。 二、脚手架的意义支流的微服务架构体系下很多公司会将原有的单体架构或者沉重的微服务进行拆分。这个时候依照模块(商品、订单、用户、库存、优惠、搜寻、治理后盾..)、依照畛域驱动设计(投保、理赔、领取、保单治理)等进行拆分就须要很多的微服务项目，如果一个一个的去创立微服务其实是在做反复的工作容易出错而且没有意义，节约人力物力。这个时候基础性的长久层、日志、异样解决、权限管制等在我的项目创立时一起生成不仅缩小了从新创立或局部复制带来的危险而且高效。 三、脚手架的创立3.1 编写我的项目模版首先咱们要有一个根底我的项目的模板，这个模板中集成了开发时所须要的罕用配置，你能够本人搭建，或者找一个根底我的项目如：SpringBoot 我的项目中曾经引入了 MyBatis-Plus, Redis, Logback, Hutool, Swagger-UI 等。或者将公司的架构积淀出一个根底我的项目的模板。 springboot模版我的项目： 3.2 生成脚手架3.2.1 应用 idea 关上我的项目模板应用 IDEA 关上根底我的项目，查看一下 maven 的配置门路，搭建过程中要保障 maven 门路始终统一，我的 maven 门路如下。 D:/Program Files/apache-maven-3.2.5D:\Program Files\apache-maven-3.2.5\conf\settings.xmlD:\Program Files\apache-maven-3.2.5\repository而后运行一下我的项目，要确保根底我的项目是失常的。 3.2.2 留神版本号而后注意一下 pom.xml 文件中的我的项目 gvn，这是我的项目的版本号，也与下文生成模板的版本号无关。 org.springframework.boot.demospring‐boot‐stage‐demo0.0.1‐SNAPSHOT3.2.3 构建脚手架形式一：关上命令行窗口 Terminal ，失常状况指向的是本我的项目的目录，如果不是则 cd 到本我的项目，而后输出： mvn archetype:create-from-project #从已有的我的项目中生成archetype. 形式二：以后我的项目所在文件夹下执行 eg: 我的项目的跟门路为 D:\spring-staggingcmd下执行 d: cd D:\spring-stagging mvn archetype:create-from-project 执行实现后脚手架我的项目也就创立实现,生成如下所示的构造 注：这里如果生成的是如下所示的构造 解决办法1.调整如图所示的artifactId与module前缀统一 将产生的target目录挪动到新的目录，关上gitbash进行如下操作 删除idea的相干文件 rm -rf .idea find . -name " .iml" -type f -print -exec rm -rf {} ; 删除不须要的实例代码find . -name "xxxMain" -type f -print -exec rm -rf {} ; eg:将脚手架放到D:\spring-stagging-archetype 目录下,目录下次要寄存src和pom文件即可 ...

本文是系列文章《从0到1打造一款脚手架》第1篇手脚架开发过程中应用了一些工具，比方交互提醒，获取用户输出，高亮，生成模板等等。这里对他们进行简略的介绍，不便后续的开发。 commandercommander 是一个命令行解决方案。通过它能够通知用户脚手架的命令与性能，以及解决用户输出。装置：npm install commander应用： 简略的应用： const { program } = require('commander');program.parse(); // 解析执行命令：node main.js --help 增加名称，形容，版本号，用法提醒。 const { program } = require('commander');// 名称，形容，版本号，用法提醒。program.name('cli').description('这是一个神奇的脚手架').version('0.0.1').usage('<command> [options]');program.parse();执行命令：node main.js --help，内容更加丰盛了： 增加 createPage 命令 const { program } = require('commander');// 名称，形容，版本号，用法提醒。program.name('cli').description('这是一个神奇的脚手架').version('0.0.1').usage('<command> [options]');// createPage 命令program.command('createPage').description('生成一个页面') // 命令形容.argument('<name>', '文件名字') // <name> 表 name 为必填.action((name) => { // 输出该命令的动作，逻辑实现。 console.log(`新建了一个文件：${name}`);});program.parse();执行命令：node main.js createPage index.vue chalkchalk 是一个终端字符串丑化工具。装置：npm install chalk@4.1.2 chalk 最新版是 ES6 Module 的写法，不反对 require 应用，如果遇到谬误 Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/chalk/source/index.js from /Desktop/test/main.js not supported.装置旧版本能够防止该问题。应用：chalk.blue 表字体蓝色，chalk.red 表字体红色，chalk.underline 表下划线，chalk.bgRed 表背景红色 ...

download：自主搭建5个精品脚手架玩转前端提效悬浮窗一、Volatile，final, static变量volatile是一种同步的弱模式（只保障可见性，并不保障操作的原子性），当申明为volatile类型后，编辑器在运行时会监督这个变量，volatile变量不会缓存在寄存器或缓存在对其余处理器暗藏的中央，所以它总是返回最新的值。拜访volatile变量不会加锁，所以不会引起线程的阻塞。写入volatile变量就像退出同步块，读取volatile变量就像进入同步块。相对来说它的用途不是很大。个别用于确保它们所援用的对象状态的可见性，或者用于标识重要生命周期事件的产生。个别只有满足下列所有条件时才会应用： 写入变量时并不依赖变量的以后值，或者可能确保只有繁多的线程批改变量的值；变量不须要与其余的状态变量独特参加不变束缚；拜访变量时，没有其余的起因须要加锁；二、公布与逸出公布一个对象的意思是使它可能被以后范畴之外的代码所应用。用线程平安的办法实现这些工作时可能须要同步；如果公布了外部状态，就可能危及到封装性使程序难以维持稳固。一个对象在尚未筹备好时就将它公布，这种状况称为逸出。 最常见的公布对象的形式有以下几种：1、对象存储在static域，公布一个对象还会间接影响到存储在此对象中的其余对象。2、把公有对象域放在一个非公有办法中返回。3、最初一种就是外部类。 上面是一种很典型的this逸出： public class ThisEscape { public ThisEscape(EventSource source) { source.registerListener(new EventListener() { public void onEvent(Event e) { doSomething(e); } });}这个例子的非凡之处在于，EventListener会封装在一个新线程中，这样有可能导致 EventListener还未实现结构，ThisEscape就会被内部线程可见。在构造函数中创立线程没有谬误，但最好不要立刻启动它。如果想在构造函数中注册侦听或启动线程，能够通过一个公有的构造函数和一个专用的工厂办法来实现： public class SafeListener { private final EventListener listener;private SafeListener() { listener = new EventListener() { public void onEvent(Event e) { doSomething(e); } };}public static SafeListener newInstance(EventSource source) { SafeListener safe = new SafeListener(); source.registerListener(safe.listener); return safe;}} 三、不可变性线程间的同步可能产生数据间的不可预见性。不可变对象永远是线程平安的。如果对象的状态无奈批改，这些变量也就永远不会变。只有满足下列的条件，才是一个不可变对象。 它的状态不能在创立后被批改；所有域都是final类型并且它被正确创立（创立期间不会产生this援用的逸出）但并不意味着把所有域都申明为final就是不可变对象。并留神下“对象不可变”和“对象的援用是不可变的”之间并不等同。程序存储在不可变对象中的状态依然能够通过替换一个带有新状态的不可变对象的实例失去更新。 平安公布下面的一些技术都在强调不公布对象封装对象，如果想平安公布的话须要思考很多，如果公布一个不可变对象，即便没有应用同步，依然是线程平安的。前提是满足不可变性的条件。如果final域指向可变对象，那么拜访这些对象的状态时依然须要同步。 public class StuffIntoPublic { public Holder holder;public void initialize() { holder = new Holder(42);}}//这个例子可能导致“部分创建对象”，用上面的代码能够进行测试，如果所holder申明为final就能够解决这个问题 ...

目录inquirer命令行交互原理？（一）readline的实现办法和原理inquirer命令行交互原理？（二）手写readline实现 背景上篇曾经具体的形容了readline源码的实现，当初就是来测验下学习的状况，手动来实现一个readline 代码(1)先监听输出流function stepRead(callback) { function onkeypress(s) { output.write(s); } const input = process.stdin; const output = process.stdout; let line = ''; emikeypressEvents(input); input.on('keypress', onkeypress);};function emikeypressEvents(stream) { function onData(chunk){ g.next(chunk.toString()) } const g = emitkeys(stream); g.next() stream.on('data',onData)};function *emitkeys(stream) { while(true){ let ch = yield; stream.emit('keyPress',ch); }}stepRead();(2)一一字母监听输出流,并返回后果知识点：input.setRawMode(true);input.resume(); // 从新开始，重启function stepRead(callback) { function onkeypress(s) { output.write(s); line += s; switch (s) { case '\r': input.pause(); callback(line) break; } } const input = process.stdin; const output = process.stdout; let line = ''; emitKeypressEvents(input); input.on('keypress', onkeypress); input.setRawMode(true); input.resume();};function emitKeypressEvents(stream) { function onData(chunk){ g.next(chunk.toString()) } const g = emitkeys(stream); g.next() stream.on('data',onData)};function* emitkeys(stream) { while(true){ let ch = yield; stream.emit('keypress',ch); }}stepRead(function(s){ console.log(s); console.log('answer=', s);});解说（1）先将输出流和输入流进行缓存，将输出流要填写的信息放在line变量中； ...

如果你能急躁看完这个对话， 兴许你会想动动手配置一个代码生成器， 这样你的撸码生存可能从此就会有所变动，变得愈发轻松。从一个脚手架说起丹尼尔: 最近要搞个代码生成器，可能疾速生成我的项目代码那种，蛋兄有什么举荐？ 蛋学生: 过往始终应用 yeoman，快超 10k star 的开源我的项目。然而，明天要举荐给你的，并非 yeoman，而是一个新生代的小鲜肉 ncgen，它可能显得更加的平易近人。 丹尼尔: 我最最喜爱简略的了，这个咋用呢？ 蛋学生: 老规矩，你说你的需要，我试着一一解答 首先，你须要一个我的项目模板丹尼尔: 我有一个我的项目模板（比方：vue3-ncgen-demo），我心愿新建的我的项目都来自于这个我的项目模板，这样我只需分心保护好这个我的项目模板即可。 蛋学生: OK，这就是我的项目脚手架的性能了。咱们来看下 ncgen 是如何解决的。 第一步 装置 ncgen $ npm i ncgen -g # yarn global add ncgen第二步 生成配置文件 ncgen-config.js，该配置文件形容了代码生成器的逻辑 $ ncgen genConf第三步 批改 ncgen-config.js 中的 main.tmplSource 为我的项目模板的地址。 export default { main: { tmplSource: "https://github.com/daniel-dx/vue3-ncgen-demo.git", },};运行一下试试： ncgen ncgen-config.js 简略复制还不行，小修小改是常态丹尼尔: 哎呦不错哦。不过目前生成的我的项目跟我的项目模板是截然不同的，但它总会有属于本人的跟我的项目模板不一些的信息，比方项目名称，作者姓名等。这些我可不心愿每次生成完我的项目还要手工批改哦。 蛋学生: OK，要求十分正当。因为这些信息是创立我的项目的人才能提供，所以咱们须要通过一些问题来收集这些信息，而后就能够依据这些信息对生成的我的项目作一些批改。咱们批改下 ncgen-config.js 中的 main.prompt 和 main.updateFiles 示例阐明： 对生成我的项目中的 package.json 文件进行字符串替换，规定如下： 将 vue3-ncgen-demo 字符串替换成用户录入的项目名称 将 Daniel.xiao 字符串替换成用户录入的作者名称export default { main: { prompt: [ { type: "input", name: "author", message: "What is the author's name", }, ], ... updateFiles: { "package.json": function (content, options) { const answers = this.$answers return api.replace(content, { "vue3-ncgen-demo": answers.projectNameObj.kebabCase, "Daniel.xiao": answers.author, }); }, }, }}; ...

本文章次要记录emp的应用过程，蕴含一下知识点： 脚手架搭建lerna 根本应用办法NPM包公布WebPack 知识点筹备工作装置lerna：npm install --global lerna克隆emp：git clone https://github.com/efoxTeam/emp.git装置依赖包：cd emp && lerna bootstrap参考npm模块管理器应用lerna治理大型前端我的项目

Generators是Yeoman生态系统的一部分，它们是通过yo命令为最终用户生成文件的插件。 组织你的generators设置为一个node模块generator实质上是一个node.js的模块 1.创立一个空文件夹用来写你本人的generator。这个文件夹必须命名为generator-name（name是你本人的generator名字）。这一点很重要，因为Yeoman依赖文件系统来查找可用的generator。 进入你的generator文件当前，创立一个package.json文件。这个文件是一个node module的manifest。你能够用npm init 这个命令初始化这个文件。 { "name": "generator-name",//必须蕴含generator "version": "0.1.0", "description": "", "files": [ "generators" ], "keywords": ["yeoman-generator"],//必须蕴含yeoman-generator "dependencies": { "yeoman-generator": "^1.0.0" }}必须放弃yeoman-generator的最新版本做为依赖，装置命令 npm install --save yeoman-generator文件构造树Yeoman的性能取决于如何构建目录树。每个Sub-generators都蕴含在其本人的文件夹中。 调用yo name时应用的默认生成器是app generator。它必须蕴含在app/目录中。 在输出 yo name:subcommand, 会调用Sub-generators ，Sub-generators存储在名为与子命令完全相同的文件夹中。 eg： ├───package.json└───generators/ ├───app/ │ └───index.js └───router/ └───index.js这个generator会暴露出 yo name 和 yo name:router命令 Yeoman容许两种不同的目录构造。它将在./和generators/中注册可用的generator。 之前的例子也能够依照上面的构造组织 ├───package.json├───app/│ └───index.js└───router/ └───index.js如果你用这种构造，保障你在package.json中的files中指定 { "files": [ "app", "router" ]}扩大generator一旦有了这个构造，就能够编写理论的generator了。 Yeoman提供了一个base generator，你能够通过继承它来取得大部分的根底行为 index.jsvar Generator = require('yeoman-generator');module.exports = class extends Generator {};重写构造函数module.exports = class extends Generator { // The name `constructor` is important here constructor(args, opts) { // Calling the super constructor is important so our generator is correctly set up super(args, opts); // Next, add your custom code this.option('babel'); // This method adds support for a `--babel` flag }};加上本人的函数每次调用生成器后，增加到原型中的每个办法都会运行，并且通常是按程序运行的。然而，正如咱们将在下一节中看到的，一些非凡的办法名将触发特定的运行程序。 ...

链接写在前面 为什么要自己手写一个脚手架？如何去思考遇到的问题？正文链接原文链接githubwhale-vue——写在前面1、为什么要自己手写一个脚手架？在写这个脚手架之前我也深深的问过自己，在我工作的项目中需要去重新写一个脚手架吗？或者说有那么多已经写好的脚手架为何不采用？ 事情的经过是这样的，在很早很早以前，我尝试使用过VUE-CLI 2进行过项目开发，当时并不怎么熟悉webpack以及一些打包编译的相关知识，随着页面的增加！项目的体积的增大，导致整体build出来的包非常之大，公共文件也会随之增大，加载速度也会随之降低。后续的结果我就不做阐述了！ 那么！后来... vue-Cli 3.0诞生了，首次使用简直是个救世的主，无论从速度还是编译过程体验都非常好，而且还可以通过vue.config.js自定义很多的配置，基本上完全可以自定义了，当然！也是随着页面的不断增加核项目的增大，在这个时候。我开始发现我自己对于webpack或者说打包编译的相关知识已经不能支撑我继续自定义的开发下去了。发现了一些潜在的问题，但是并没有实际的解决思路的时候，就可以追述到一些基础知识的欠缺。 随着项目的逐渐增大，尤其是多页应用的支持以及一些文件模块化的拆分，包括一些tree-shaking的运用。尽管vue-cli3.0支持configureWebpack 这样强大的API。但是仔细想想，要想从事情的本质或根本上解决问题，首先自身要相对的熟悉，并在此基础之上运用和操作，得以充分的发挥；所以还是决定自己去了解以便更好的开发。 2、如何去思考遇到的问题？在项目的开发中，尤其是在写脚手架这种工具性的东西的时候，需要考虑到的场景和实际运用的时候，更多的是不能沉浸在自己的思维之中，参考并学习别人的经验是有必要的，从而得出一套符合自己的思路。 从最开始的目录结构，以及模块化的一些思考，如何更好的做到性能的优化等等，都是值得思考的问题所在，如何处理好自己的业务逻辑，针对不同的项目以及兼容性的考虑等等。 ——正文在此之前我们需要对webpack4的一些文档或者API进行充分的了解，可以参考官方文档或者参考印记中文的webpack文档,但是针对于webpack4的文档本来介绍的不是很全面，在很多的API上面还是之前的介绍，所以，有很多小伙伴在看文档的时候发现并不能正常的进行操作，这时候可以结合两个不同版本的文档进行研究，当然时间的消耗成本也是比较高的。 3、一些基本的构建思路！在此之前我将控制业务逻辑的代码进行分离，脚手架是单独存在的。两者目录结构相互独立，业务逻辑的代码永远不会干涉到脚手架的对于一些最基础的配置我就不一一讲述了： webpack.config.jsmodule.exports = { mode:'development', entry: './***.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module:{ //... }, plugins:[ //... ]};以上是一些基本的配置方式，当然我们可以通过package.json文件中的scripts选项自定义一些基于命令行的配置： package.josn "scripts": { "dev": "APP_ENV=dev webpack-dev-server --config core/dev.js", "prd": "APP_ENV=build webpack --config core/build.js", "build": "APP_ENV=build webpack --config core/build.js", "lint": "eslint --fix */*.vue *.js", "test:whale": "jest tests/*.js && npm run build" },以上的一些配置仅供参考，分别可以通过npm run dev | npm run prd | ...来进行相关的操作。关于更多的npm script 详细参考 ...

本文不是什么技术性介绍文章，准确地说算是自己的成长记录吧。刚参加工作时，组里使用的脚手架是由 leader 使用 webpack, gulp 搭建的多页面应用脚手架 fex。当时只需知道怎么使用就行了，不过为了能更好地工作，对 fex 怎么构建一直很好奇，也一直关注相关的技术栈。经过一年多磨练后，对 fex 怎么搭建的有了个大概地认识。常言道："没有对比就没有伤害"。 在使用 vue-cli 构建第一个 vue 项目后，对脚手架构建有了个全新的认识。发现 fex 存在很多不足： 在打包时，只对 JavaScript 和 CSS 脚本文件进行打包压缩处理。不能对资源文件（如 img，字体等）进行依赖处理。导致在打包时： 不能按需打包（即实际用到资源，才将其进行打包）不能进行 MD5 处理不能输出压缩版的 html手动注入 JavaScript 和 CSS 脚本文件，如果需要做优化，会很不方便，特别在多页面情况下。dev 与 build 使用不同的技术方案，增加定制的成本。基于 nodemon 对开发目录进行 watch，当执行修改操作时，会重启整个服务。会存在重启服务耗时比较长的情况，导致刷新页面出现空页面的情况，开发体验不是很好。缺少 code-splitting、HMR、端口检测、Babel 等功能。当然，fex 也有自己的优点。基于自建服务提供前后端复用模板功能。前端后端使用相同的模板语言，前端拼接的模板可以直接输出给后端使用。 第二年年初，组里项目不是太多，刚好有时间折腾一下，于是决定构建一个全新的脚手架 fes。为了尝试一些新东西，在技术栈上，都使用了当时最新的技术框架 webpack4、koa2、babel6 来搭建。为了了解 webpack 如何工作，对 webpack 就做了 8 次调试，才稍微对 webpack 整个架构有个初步认识。 singsong: 在真正去了解 webpack 时，才知道它有多复杂。当然也参考了网上一些大神分享关于 webpack 源码分析的文章。反正整个过程还是挺熬心的????同时，还对 koa2、babel6 做了相关的研究。附一张 koa2 分析图吧????： 为了提高 fes 开发体验，除了继承 fex 的模板复用功能外，还集成了 vue-cli 中不错的功能。 ...

前面的话在前端工程化过程中，为了解决多项目中，相似度高的工作，便诞生许多前端脚手架，这里记录下自己实现一个简易前端脚手架过程的实践。主要是解决多个页面相似内容的复制粘贴问题，功能类似于Webstorm的Live template，或者Vscode的Snippets。 思路预先配置页面模板，预留关键字变量用户填写关键字变量，生成页面模板，输出到制定目录用到的包fs读写文件模块，这里主要用于读入用户配置文件，输出模板到文件 commanderNodeJs命令行工具，提供了用户命令行输入和参数解析，用户解析用户输入 inquirerNodeJs交互式命令行工具，询问操作者问题，获取用户输入，校验回答的合法性 metalsmith文件处理，读写操作 handlebars将模板中的变量替换为用户输入，编译模板，类似框架如：artTemplate，Jade pathNodeJs的路径操作库，如合并路径 chalk命令行输出样式美化 具体实现首先在一个新的文件夹，如xxx-tools下 npm init 创建一个node项目，因为是要做成一个npm包的脚手架，所以在包的取名上一定要唯一，即package.json中name字段，避免在发包的时候和网上已经存在的npm包重名，报403没有权限的错。在xxx-tools文件夹下创建bin文件夹，同时在bin文件夹下创建脚本tempTool文件，内容如下：#!/usr/bin/env nodeconsole.log('Hello World');注意哦，#!/usr/bin/env node 这个是Linux规范，用来指明了这个执行脚本的解释程序，要是没有这一行，默认用当前Shell去解释这个脚本 在package.json中增加bin配置： "bin": { "tempTool": "./bin/tempTool" },到目前为止，一个简单的前端脚手架实现了，在npm官网注册，在项目里执行npm login登录，之后npm publish如果一切顺利，npm包提交完毕，可以在其它项目中执行npm i -g xxx-tools，安装这个包，执行xxx-tools命令，输出 Hello World，脚手架开发过程中，也涉及到在本地调试，可以直执行node ./bin/xxx-tools现在来加入具体的开发流程，用户的输入，输入信息的读取等等，bin文件修改如下#!/usr/bin/env nodeconst program = require('commander');const chalk = require('chalk');const { loadTemplate } = require('../src/lib/writeTemp');const log = data => console.log(chalk.green(data));log('初始化模板配置');program .command('create') .description('create template') .option('-d') .action(async function () { const result = await loadTemplate(); result ? null : log('配置完毕'); });program.parse(process.argv);用户执行create命令，在这里调用了loadTemplate函数，看一下这个函数 ...

引言下面是一个使用脚手架来初始化项目的典型例子。 随着前端工程化的理念不断深入，越来越多的人选择使用脚手架来从零到一搭建自己的项目。其中大家最熟悉的就是create-react-app和vue-cli，它们可以帮助我们初始化配置、生成项目结构、自动安装依赖，最后我们一行指令即可运行项目开始开发，或者进行项目构建（build）。 这些脚手架提供的都是普遍意义上的最佳实践，但是我在开发中发现，随着业务的不断发展，必然会出现需要针对业务开发的实际情况来进行调整。例如： 通过调整插件与配置实现 Webpack 打包性能优化后删除脚手架构建出来的部分功能项目架构调整融合公司开发工具……总而言之，随着业务发展，我们往往会沉淀出一套更“个性化”的业务方案。这时候我们最直接的做法就是开发出一个该方案的脚手架来，以便今后能复用这些最佳实践与方案。 1. 脚手架怎么工作？功能丰富程度不同的脚手架，复杂程度自然也不太一样。但是总体来说，脚手架的工作大体都会包含几个步骤： 初始化，一般在这个时候会进行环境的初始化，做一些前置的检查用户输入，例如用 vue-cli 的时候，它会“问”你很多配置选项生成配置文件生成项目结构，这是候可能会使用一个项目模版安装依赖清理、校验等收尾工作此外，你还需要处理命令行行为等。往往我们只是想轻量级、快速得创建一个特定场景的脚手架（不用想vue-cli那么完备）。而对于想要快速创建一个脚手架，其实我们不用完全从零开始。Yeoman 就是一个可以帮我们快速创建脚手架的工具。 可能很多同学都不太了解，那么先简单介绍一下 Yeoman 是什么，又是如何帮我们来简化脚手架搭建的。 首先，Yeoman 可以简单理解为是一个脚手架的运行框架，它定义了一个脚手架在运行过程中所要经历的各个阶段（例如我们上面说的，可能会先读取用户输入，然后生成项目文件，最后安装依赖），我们所需要的就是在生命周期的对应阶段，填充对应的操作代码即可。而我们填充代码的地方，在 Yeoman 中叫做 generator，物如其名，Yeoman 通过调用某个 generator 即可生成（generate）对应的项目。 如果你还不是特别清楚它们之间的关系，那么可以举个小例子： 将脚手架开发类比为前端组件开发，Yeoman 的角色就像是 React，是一个框架，尤其是定义了组件的生命周期函数；而 generator 类似于你写的一个 React 业务组件，根据 React 的规则在各个生命周期中填代码即可。 Yeoman 内置的“生命周期”方法执行顺序如下： initializingpromptingdefaultwritingconflictsinstallend其中 default 阶段会执行你自定义地各种方法。 同时，Yeoman 还集成了脚手架开发中常用的各类工具，像是文件操作、模版填充、终端上的用户交互功能，命令行等，并且封装成了简单易用的方法。 通过这两点，Yeoman 可以帮我们大大规范与简化脚手架的开发。 2. 开发一个自己的脚手架了解了一些脚手架的工作方式与 Yeoman 的基本概念，咱们就可以来创建一个属于自己的脚手架。作为例子，这个脚手架的功能很简单，它会为我们创建一个最简版的基于 Webpack 的前端项目。最终脚手架使用效果如下： 2.1. 准备一个项目模版脚手架是帮助我们快速生成一套既定的项目架构、文件、配置，而最常见的做法的就是先写好一套项目框架模版，等到脚手架要生成项目时，则将这套模版拷贝到目标目录下。这里其实会有两个小点需要关注。 第一个是模版内变量的填充。 在模版中的某些文件内容可能会需要生成时动态替换，例如根据用户在终端中输入的内容，动态填充package.json中的name值。而 Yeoman 内置了 ejs 作为模版引擎，可以直接使用。 第二个就是模版的放置位置。 一种是直接放在本地，也就是直接放到 generator 中，跟随 generator 一起下载，每次安装都是本地拷贝，速度很快，但是项目模版自身的更新升级比较困难，需要提示用户升级 generator。 ...

前言这是一套我自己经常用的H5活动页面开发脚手架，针对目前一般的H5页面，基本上2小时就能完成相关的开发内容。俗话说：工欲善其事必先利其器，有了这么一套H5页面脚手架，我相信80%的H5页面，都能够在2小时当中开发完成。脚手架是基于React的，这里已经帮您做了如下几个基本事情 页面缩放，基于宽度为750px的视觉稿，当然您也可以自行修改页面微信分享，只需要配置获取分享相关的签名接口，就可以实现预加载loading，如果您需要，基于create.js 的 preload模块实现包含了Axios，你可以直接使用Axios请求相关的接口项目地址https://github.com/mmcai/single-page-react-h5目录结构说明|——build(代码编译后所在的文件目录)|——config(webpack相关的配置目录)|——node_modules|——public(html模板，favicon及其他静态资源存放目录)|——scripts(webpack各个环境脚本执行文件存放目录)|——src(项目源码存放路径)| |——components(组件存放目录，如果有？)| |——containers(具体页面存放目录)| |——...(具体看代码)| |——public(一些第三方库包含的相关资源存放的目录，比如swiper，animate.css)| |——utils(工具函数存放目录)| |——index.js(webpack入口执行文件)| |——registerServiceWorker.js(生产环境中处理文件的缓存，用来加快页面访问速度的)||——.gitingnore|——LICENSE|——package-lock.json|——package.json|——README.md如何使用确认您当前的系统是否具有以下相关环境（这里说的是window系统下）- git- node(npm)为了确保下载npm的体验更好，您可以选择以下两种方式之一1、安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org2、修改npm下载源npm config set registry https://registry.npm.taobao.org第一步npm install 或者 cnpm install 安装相关的依赖包 第二步npm run start 启动项目 第三步编写您的活动页面相关业务逻辑代码 第四步npm run build 打包（编译项目） 其他如果您的页面需要配置微信当中的分享，请保证与您联调的后台接口返回内容是如下格式的 { success: true, data: { "debug": true, "appId": "wxb17a5a75c9ad192b", "timestamp": "1533897246", "nonceStr": "b9aab9c2ii", "signature": "d1c126bbcaff2f48d415fd71e92684978c0e1a1c", "jsApiList": [ "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone" ] }}或者您修改utils文件夹下面的Weixin.js文件 关于资源预加载 在config.js配置资源的根路径window.BaseUrl在webpack的入口文件index.js里面配置资源列表Manifest引入工具函数import PreLoad from './utils/PreLoad';执行资源预加载函数，然后再回调函数里面初始化页面关于日常的H5活动页面的一些开发建议如果您是一个H5活动页面的开发者，我相信，你一定经历过一周内好几个活动页面的同时开发，同时要求上线的需求。一开始在公司工作流程不怎么规范的时候，基本上运营人员，在即将做活动的前一天下午才会告诉你，我们有个活动页面，能不能明天上，最迟也要后天上线，我想您一定是崩溃的，但是我们的工作的一部分就是服务他们，所以抱怨几句，往往还是需要做这些临时的需求的。H5活动页面一般分为几种： 常规活动（促销类的，拉新类的）系列互动（一揽子促销）运营数据报告类的游戏类的...H5活动页面的特点往往是：生命周期短，上线时间紧张总的来说就是：快速上线，快速扔掉。这个时候如何保质保量，快速做好，快速上线，就是一门艺术了，根据公司的配置不同会有好多情况。我这边的原则就是，分析活动页面上那些是需要用户操作的，那些是展示的所有会让用户填写和操作的地方都用代码实现，其他一切展示的内容，统统使用图片。前端页面里面大量使用图片，可能会让自己不舒服，因为没啥技术含量，但我们做事情不是给自己看的，别人才不管你代码如何，只要你的项目能够按时保质保量的上线，后台能够有足够优秀的数据，就妥了。把有限的生命浪费在那些重复的，而且你已经会的，写过千八百遍的代码上不值得。如果你能开发一个工具或者制定一套工作流程能快速完成H5活动的任务，这个才是需要挑战的。技术是一种手段，是为了增加那些事情工作效率的，总的来说是为别人服务，脱离的服务，它的存在也就没有价值了不是吗。 ...

项目地址https://github.com/xinglie/re…界面预览设计需求1.　可视化工具越来越多的成为标配，针对web开发，各种框架都有自己的可视化搭建工具2.　依赖web操控、展示、通信的行业会越来越多，为传统行业提供快速搭建的功能3.　大数据时代，除数据可视化，其它各方面的可视化需求也会增多设计实现1.　脚手架只做基础的布局控制与界面展现2.　编辑、可视哪些元素由开发者提供，包括有哪些元素，元素可编辑的属性，界面展示，逻辑控制等3.　输入输出使用JSON数据，可视化产出描述的数据，可用其它任意技术进行界面构建还原4.　尽量适应任何的可视化场景：报表，物联网，页面搭建等

前言在vue-cli 2.X的时候，也写过一篇类似的文章，在八月份的时候vue-cli已经更新到了3.X，新版本的脚手架，功能灰常强大，试用过后非常喜欢，写篇教程来帮助各位踩一下坑。游泳、健身了解一下：博客、前端积累文档、公众号、GitHub主要内容：零配置启动/打包一个.vue文件详细的搭建过程重点推荐：使用图形化界面创建/管理/运行项目安装：卸载旧版本：如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它:npm uninstall vue-cli -gNode版本要求：3.x需要在Node.js8.9或更高版本(推荐8.11.0+)，点击这里可以安装node大多数人都安装过了node,使用下面的命令行查询你的node版本:node -v如果你的版本不够，可以使用下面的命令行来把Node版本更新到最新的稳定版：npm install -g n // 安装模块 这个模块是专门用来管理node.js版本的n stable // 更新你的node版本mac下，更新版本的时候,如果提示你权限不够：sudo n stable // 我就遇到了安装vue-cli:npm install -g @vue/cli // 安装cli3.xvue –version // 查询版本是否为3.x如果cli3.x用的不舒服，cli3也能使用2.x模板：npm install -g @vue/cli-init // 安装这个模块// 就可以使用2.x的模板：vue init webpack my-project零配置启动/打包一个.vue文件：安装扩展：npm install -g @vue/cli-service-global安装完扩展之后，可以随便找个文件夹建一个如下方示例的.vue文件,然后跑起来：vue serve App.vue // 启动服务vue build App.vue // 打包出生产环境的包并用来部署如下图，只需一个.vue文件，就能迅速启动一个服务：如图所示，服务启动的时候回生成一个node_modules包，稍微测试了一下，服务支持ES6语法和热更新，打包的时候会生成一个dist文件夹。(新建一个test.vue文件也只有一个node_modules/dist文件夹)这是个很棒的功能，用于开发一个库、组件，做一些小demo等都是非常适合的！第一次创建项目:1. 命令行:vue create hello-cli3 hello-cli3是文件夹名字，如果不存在会自动创建文件夹，如果存在会安装到那个文件夹中。相比2.x的时候需要自己手动创建一个文件夹，这里也算是一个小优化吧。2. 选择模板:一开始只有两个选项: default(默认配置)和Manually select features(手动配置)默认配置只有babel和eslint其他的都要自己另外再配置，所以我们选第二项手动配置。在每次选择手动配置之后，会询问你是否保存配置，也就是图片中的koro选项，这样以后我们在进行创建项目的时候只需使用原先的配置就可以了，而不用再进行配置。3. 选择配置：根据你的项目需要来选择配置,空格键是选中与取消，A键是全选? Check the features needed for your project: (Press <space> to select, to toggle all, to invert selection) // 检查项目所需的功能:(按<space>选择，切换所有，反转选择）( ) TypeScript // 支持使用 TypeScript 书写源码 ( ) Progressive Web App (PWA) Support // PWA 支持 ( ) Router // 支持 vue-router ( ) Vuex // 支持 vuex ( ) CSS Pre-processors // 支持 CSS 预处理器。 ( ) Linter / Formatter // 支持代码风格检查和格式化。 ( ) Unit Testing // 支持单元测试。 ( ) E2E Testing4. 选择css预处理器:如果你选择了Css预处理器选项，会让你选择这个? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):// 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：SCSS/SASS LESS Stylus5. 是否使用路由的history模式：这里我建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。选yes的话需要服务器那边再进行设置。Use history mode for router? (Requires proper server setup for index fallback in production) // 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)6. 选择Eslint代码验证规则：> ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier7. 选择什么时候进行代码规则检测：建议选保存就检测，等到commit的时候，问题可能都已经积累很多了。之前写了篇VsCode保存时自动修复Eslint错误推荐一下。? Pick additional lint features: (Press <space> to select, to toggle all, to invert selection)( ) Lint on save // 保存就检测 ( ) Lint and fix on commit // fix和commit时候检查8. 选择e2e测试:? Pick a E2E testing solution: (Use arrow keys)❯ Cypress (Chrome only) Nightwatch (Selenium-based) 9. 把babel,postcss,eslint这些配置文件放哪：通常我们会选择独立放置，让package.json干净些? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)In dedicated config files // 独立文件放置 In package.json // 放package.json里10. 是否保存配置：Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置// 选保存之后，会让你写一个配置的名字：Save preset as: name // 然后你下次进入配置可以直接使用你这次的配置了11. 下载依赖12. webpack配置的目录不见了：一起来看一下新项目的结构(下图),会发现2.x的webpack配置的目录不见了，也就是没有build、config这两个文件夹了：这种方式的优势对小白来说非常友好，不会一上来就两个文件夹，一堆文件，看着脑袋都大了。然后在引用抄别人的配置的时候，也非常方便，直接将文件复制过来就好了。在自定义一下webpack的配置，我们需要在根目录新建一个vue.config.js文件，文件中应该导出一个对象，然后进行配置，详情查阅官方文档// vue.config.jsmodule.exports = { // 选项…}还有一些小变动像：static文件夹改为public了，router文件夹变成了单个文件之类的(我之前一直这么做,嘿嘿)。13.启动项目：启动项目：npm run serve // 不是之前的 npm run dev打开http://localhost:8080：使用图形化界面创建/管理/运行项目：启动图形化界面vue ui 这是个全局的命令 在哪个文件夹都可以打开界面(下图)，重要的项目可以收藏起来(置顶)：创建项目和导入项目：目录选中之后，导入项目点击下面的导入就可以了。创建项目，填一个文件夹名字：然后选一下预先保存好的设置就可以了，非常方便，建议采用图形界面来创建项目：项目管理：当我们点击hello -cli3项目，就会进入项目管理的界面1. 仪表盘：这个仪表盘，主要是为了我们操作方便而设置的可以点击右上角的按钮，来添加/移动这些功能选项。2. vue-cli3.x插件：vue-cli3的插件功能，详情了解官方文档cli3插件安装的过程：3. 项目依赖直接在图形界面管理依赖很舒服了！安装依赖的时候，要记得选择开发依赖/运行依赖！4. 项目配置可以对cli进行一些配置、Eslint规则修改：5. 任务：serve 运行项目，点击直接运行，再也不用输入命令了！可以清楚的看到各个模块用了多久，方便我们针对性的进行优化：build 打包项目：这里主要展示了图表的功能，比以前2.x生成报告更加直观，超级棒！6. 其他夜间风格界面，我更喜欢这个界面直接打开编辑器,很棒了！还有一些乱七八糟的按钮结语可以说很认真了，希望大家看完能够有些收获，赶紧试试新版的vue-cli吧！希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。博客、前端积累文档、公众号、GitHub以上2018.11.10参考资料：vue-cli3官方文档vue-cli3.0搭建与配置 ...