altium designer无法创建工程-尊龙游戏旗舰厅官网

工程化笔记 .  . 光

前端工程化简述

简述

一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。

模块化，组件化，规范化，自动化.

解决的问题

传统语言或语法的弊端。

无法使用模块化/组件化。

重复的机械式工作。

代码风格统一，质量保证。

依赖后端服务接口支持。

整体依赖后端项目。

一个项目过程中工程化的表现

创建-》编码-》预览/测试-》提交-》部署

一切重复的工作，都应该被工程化！

工程化不等于工具

一些成熟的工程化集成

工程化与node.js

没有node就没有今天的前端

脚手架工具

概述

脚手架的本质作用，创建项目基础结构，提供项目规范和约定。

常用的脚手架工具

react  create-react-app

vue  vue-cli

angular   angular-cli

通用形   yeoman

固定目录形式   plop

yeoman简介

yeoman基础使用

你要提前安装好 node  , npm/yarn

全局范围安装yocnpm install -g yo安装对应的generator (这里以想创建node项目的脚手架为例)cnpm install generator-node -g通过yo运行generatormkdir my-moduleyo node最后通过命令行交互填写项目结构，一些描述，作者什么的

sub generator

有时候我们只是在原有的项目上添加些配置文件，例如eslint配置文件，bable配置文件等，这些文件都有些基础代码，如果自己手动配的话也容易出错，这就需要生成器自动帮我们生成，这种需求就适合通过sub generator来实现。

cd my-moduleyo node:readme

yeoman使用步骤总结

明确你的需求

找到合适的generator(通过yeoman尊龙游戏旗舰厅官网找)

全局范围安装你找到的generator

通过yo运行此generator

通过命令行交互填写项目结构

生成你所需要的项目结构

自定义generator

比如vue官方的vue-cli，创建完成后只包含vue结构，

如果我们还想集成vue-router，vuex，

那我们就可以自行搭建自己的脚手架。

创建generator模块

generator本质上就是一个npm模块

如果想添加sub generator，目录就如下

还有generator的模块名称必须是generator-

mkdir generator-sample && cd generator-sample创建一个package.jsonnpm init这个模块会为我们提供一个generator生成器的基类，基类中提供了一些工具函数，可以让我们写生成器的时候更加便捷npm install yeoman-generator按照上述图的目录标准，创建generators/app/index.js文件// index.js// 此文件作为 generator 的核心入口// 需要导出一个继承自 yeoman generator 的类型// yeoman generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入const generator = require('yeoman-generator')module.exports = class extends generator { writing () { // yeoman 自动在生成文件阶段调用此方法 // 我们这里尝试往项目目录中写入文件 this.fs.write( // 这个fs不是node模块的fs，这个更强大 this.destinationpath('temp.txt'), // 绝对路径 math.random().tostring() //填入随机数 ) }}

这样一个简单的generator就完成了。

通过命令行把这个模块链接到全局范围，使之成为一个全局模块包npm linkmkdir my-sample && cd my-sampleyo sample=>生成文件啦

根据模板创建文件

大部分时候我们要创建的文件较多也较复杂，

所以我们使用模版，可以更便捷一些

创建template/foo.txt// foo.txt这是一个模板文件内部可以使用 ejs 模板标记输出数据例如：其他的 ejs 语法也支持哈哈哈writing () { // 通过模板方式写入文件到目标目录 // 模板文件路径 const tmpl = this.templatepath('foo.txt') // 输出目标路径 const output = this.destinationpath('foo.txt') // 模板数据上下文 const context = { title: 'hello zce~', success: true } this.fs.copytpl(tmpl, output, context)}

html也同理

接收用户输入

通过prompting方法，接收命令行交互中用户输入的数据

prompting () { // yeoman 在询问用户环节会自动调用此方法 // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问 return this.prompt([ { type: 'input', name: 'name', message: 'your project name', default: this.appname // appname 为项目生成目录名称 } ]) .then(answers => { // answers => { name: 'user input value' } this.answers = answers }) }// 在想使用的地方 this.answer.name

vue generator案例

。。。。。

发布generator

generator本质上就是一个npm模块，所以就是发布一个npm模块npm publish

plop简介

一个小型前端脚手架工具，一般用来创建项目中的同类型文件

plop的基本使用

..

脚手架的工作原理

启动它过后，它会自动的去询问你一些预设的问题，然后将你回答的结果，结合模版文件，生成项目的内容。核心代码：

#!/usr/bin/env node// node cli 应用入口文件必须要有这样的文件头//意思是指定用node执行脚本文件。// 脚手架的工作过程：// 1. 通过命令行交互询问用户问题// 2. 根据用户回答的结果生成文件const fs = require('fs')const path = require('path')const inquirer = require('inquirer') // 命令行交互模块const ejs = require('ejs')inquirer.prompt([ { type: 'input', name: 'name', message: 'project name?' }]).then(anwsers => { // console.log(anwsers) // 根据用户回答的结果生成文件 // 模板目录 const tmpldir = path.join(__dirname, 'templates') // __dirname:当前模块的目录名 // 目标目录 const destdir = process.cwd() // node.js 进程的当前工作目录。 // 将模板下的文件全部转换到目标目录 fs.readdir(tmpldir, (err, files) => { if (err) throw err files.foreach(file => { // 通过模板引擎渲染文件 ejs.renderfile(path.join(tmpldir, file), anwsers, (err, result) => { if (err) throw err // 将结果写入目标文件路径 fs.writefilesync(path.join(destdir, file), result) }) }) })})

自动化构建

基本使用

源代码自动化构建成生产代码。

使用提高效率的规范，语法，和标准。来进行构建。

初体验

初始化目录结构

安装sass 模块

npm script

优化重复执行命令 scripts 里面可以自动发现 node_modules 里面的命令 

不需要定义完整的运行路径

实现自动化构建最简单的方式

// 运行yarn build

还不够完美 我们想实时编译 构建

所以安装一个 browser 启动一个服务器

yarn add browser-sync --dev

在scripts 里面添加一个启动命令

运行  不出意外会启动 localhost:3000 的路径 打开 index.html

yarn serve

我们需要在启动之前构建好css 才可以  可以使用scripts 的钩子 

我们还可以给scss 命令添加一个 --watch 的命令 

会监听我们的文件的变化

一旦 文件改变就会自动被编译。

但是这样运行我们会被暂停导致 browser-sync 无法直接去工作

我们可以借助 npm-run-all 的模块同时执行多个命令

安装

yarn add npm-run-all --dev

运行

yarn start 

给serve 命令添加 --files 参数监听文件变化

将文件内容自动同步到浏览器

总结

以上是尊龙游戏旗舰厅官网为你收集整理的altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。