前端开发中提到的“脚手架”是指什么?

JavaScript014

前端开发中提到的“脚手架”是指什么?,第1张

前端开发中提到的“脚手架”是一个形象的比喻,比喻各类语言的前期工作环境。

在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要用到的工具、环境都配置好了,你就可以方便地直接开始做开发,专注你的业务,而不用再花时间去配置这个开发环境,这个开发环境就是脚手架。

比如vue.js就有个vue-cli脚手架,基于node.js的开发环境,作者帮你把开发环境大部分东西都配置好了,你把脚手架下载下来就可以直接开发了,不用再考虑搭建这些工具环境。

一、脚手架的概念

脚手架是前端工程化的集成,是前端工程化的发起者,其本质和作用是创建项目基础结构、提供项目规范和约定。

二、通用工具

Yeoman 通用型脚手架工具,容易拓展,比较灵活,可创建属于自己的脚手架。Plop项目开发过程中,创建特定类型的文件。

三、Yeoman 的基础使用

一、脚手架的概念

脚手架是前端工程化的集成,是前端工程化的发起者,其本质和作用是创建项目基础结构、提供项目规范和约定。

二、通用工具

Yeoman 通用型脚手架工具,容易拓展,比较灵活,可创建属于自己的脚手架。Plop项目开发过程中,创建特定类型的文件。

三、Yeoman 的基础使用

四、Yeoman Sub Generator

作用:在某些某些项目配置通用的的一些文件

在当前文件输入命令:yo node:cli  // yarn  // yarn link  // chen-module  --help

五、Yeoman 基本使用步骤

六、创建自定义的generator模块

本质: 自定义的generator本质上就是一个npm 模块

方法:1、yarn init 初始化package.json 文件

    2、 yarn add yeoman-generator 引入模块

    3、创建文件目录结构 generators/app/index.js 作为入口文件

    4、文件内容

5、yarn link 全局

6、新建文件夹,运行命令yo sample

注意事项:当时eoman-generator,为5.多的版本,报错 。requires yeoman-environment at least 3.0.0,current version is 2.10.3,try reinstalling latest version of "of

最好指定yeoman-generator 的版本为 4.0.1  "yeoman-generator": "^4.0.1" 版本号最好为这个

七、利用模版也可以在指定目录创建文件

this.fs.copyTpl(tmpl,output,context) 。 接受三个参数

八、接受用户指令,生成相关模版

九、批量生成多个项目文件的方法

创建文件路径的数组,循环依次写入文件

十、发布自定义的generator模块到npm

1、创建本地仓库一系列命令:

(1) 创建gitignore文件  echo node_module >.gitigonre

(2)git init

(3)git  add .

(4)git commit -m 'fistcomit'

(5)git remote add origin 远程仓库地址

(6)git push -u origin master

2、进行打包编译

(1)yarn pubilsh  此时会出现npm用的淘宝镜像的报错,改为制定到官方npm或者yarn 的地址

    改为 yarn publish --registry=https://registry.yarnpkg.com。

(2此时可能还会报错 Couldn't publish package:  .......invalid for new packages.

    红色框为小写,发布所有的npm 包都要求小写,不能有大写,故把项目改为 generator-chen-react-com

(3)可能还会报错 r Couldn't publish package: "https://registry.yarnpkg.com/generator-chen-react-com: Forbidden"

那去你的邮箱,激活npm 发来的邮件吧,点击一下按钮即可。

四、Yeoman Sub Generator

作用:在某些某些项目配置通用的的一些文件

在当前文件输入命令:yo node:cli  // yarn  // yarn link  // chen-module  --help

五、Yeoman 基本使用步骤

六、创建自定义的generator模块

本质: 自定义的generator本质上就是一个npm 模块

方法:1、yarn init 初始化package.json 文件

    2、 yarn add yeoman-generator 引入模块

    3、创建文件目录结构 generators/app/index.js 作为入口文件

    4、文件内容

5、yarn link 全局

6、新建文件夹,运行命令yo sample

注意事项:当时eoman-generator,为5.多的版本,报错 。requires yeoman-environment at least 3.0.0,current version is 2.10.3,try reinstalling latest version of "of

最好指定yeoman-generator 的版本为 4.0.1  "yeoman-generator": "^4.0.1" 版本号最好为这个

七、利用模版也可以在指定目录创建文件

this.fs.copyTpl(tmpl,output,context) 。 接受三个参数

八、接受用户指令,生成相关模版

九、批量生成多个项目文件的方法

创建文件路径的数组,循环依次写入文件

十、发布自定义的generator模块到npm

1、创建本地仓库一系列命令:

(1) 创建gitignore文件  echo node_module >.gitigonre

(2)git init

(3)git  add .

(4)git commit -m 'fistcomit'

(5)git remote add origin 远程仓库地址

(6)git push -u origin master

2、进行打包编译

(1)yarn pubilsh  此时会出现npm用的淘宝镜像的报错,改为制定到官方npm或者yarn 的地址

    改为 yarn publish --registry=https://registry.yarnpkg.com。

(2此时可能还会报错 Couldn't publish package:  .......invalid for new packages.

    红色框为小写,发布所有的npm 包都要求小写,不能有大写,故把项目改为 generator-chen-react-com

(3)可能还会报错 r Couldn't publish package: "https://registry.yarnpkg.com/generator-chen-react-com: Forbidden"

那去你的邮箱,激活npm 发来的邮件吧,点击一下按钮即可。

    安装cli-angularjs的过程出现命令无法执行,其原因是cli-angular自带的webpack-cli版本过低,解决的办法是:

1. 全局安装webpack-cli: npm install -g webpack-cli

2. 将安装webpack-cli后对应的文件夹拷贝到指定目录

    拷贝源:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\webpack-cli

    拷贝目的:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\cli-angularjs\node_modules\webpack-cli

    其中xxxxxx为各自的计算机用户名