記事の説明：この記事は、レガオのフロントエンドトレーニングキャンプのメモと経験です。何か問題がある場合は、指摘して教えていただければ幸いです。ありがとうございます。
1.エンジニアリングの定義と解決すべき主な問題
従来のWebサイトから、現在のH5、モバイルアプリ、デスクトップアプリケーション、小さなプログラムまで、開発者のフロントエンド要件は大幅に変更されました。
私たちが直面している問題
- ES6 +を使用したいのですが、互換性の問題があります（従来の言語または文法の欠点）
- Less / Sass / PostCSSを使用してCSSのプログラミングを強化したいのですが、動作環境で直接サポートできません（モジュール化/コンポーネント化は使用できません）
- コードとリソースファイルは、展開前とオンラインで手動で圧縮する必要があり、展開プロセス中にコードをサーバーに手動でアップロードする必要があります（繰り返しの機械的作業）
- 複数人の共同開発では、全員のコードスタイルを厳密に統一することは不可能であり、ウェアハウスから引き出されたコードの品質は保証できません（統一されたコードスタイル、品質保証）
- 一部の機能を開発するときは、バックエンドサービスインターフェイスが完了するのを事前に待つ必要があります（バックエンドサービスインターフェイスのサポートに依存し、全体的にバックエンドプロジェクトに依存します）
2.プロジェクト中のエンジニアリングパフォーマンス
エンジニアリングパフォーマンス：効率の向上、コストの削減、品質保証を目的としたすべての手段は、エンジニアリングに属します。
すべての反復タスクは自動化する必要があります。エンジニアリングは特定のツールと同じではありません。エンジニアリングの中核はプロジェクト全体の計画または構造であり、このプロセスのツールは、この種の計画または構造を着陸させて実装するためにのみ使用されます。
3つ、エンジニアリングとNode.js
node.jsがなければ、今日のフロントエンドはありません。
エンジニアリング：
- 足場ツールの開発
- 自動ビルドシステム
- モジュラーパッケージ
- プロジェクトコードの標準化
- 自動展開
4.足場ツールと一般的な足場ツールの概要
足場の重要な役割：プロジェクトインフラストラクチャを作成し、プロジェクトの仕様と規則を提供します。通常、同じプロジェクトを開発する場合、いくつかの同じ規則があります。
- 同じ組織構造
- 同じ開発パラダイム
- 同じモジュールの依存関係
- 同じツール構成
足場ツールを使用して特定のタイプのスケルトンを作成し、このタイプのスケルトンに基づいてフォローアップ開発作業を実行します。たとえば、IDEでプロジェクトを作成するプロセスは、足場ワークフローです。
一般的に使用される足場ツール：
- Reactプロジェクト=》 create-react-app
- vue.js => vue-cli
- Angularプロジェクト=》 angular-cli
情報に基づいて対応するプロジェクトインフラストラクチャを作成するだけであり、ヨーマンなどの汎用の足場ツールで表されます。これらは、対応するプロジェクト構造を生成するための一連のテンプレートを提供できます。このタイプは、一般に非常に柔軟性があります。そして、それは簡単に拡張できます。コンポーネント\モジュールの作成に必要なファイルなど、プロジェクトの開発中に特定の種類のファイルを作成するために使用されるplopのような種類のスキャフォールディングツールもあります。
ファイブ、ヨーマン
Yeomanは、最新のWebプロジェクトを作成するためのスキャフォールディングツールです。vue-cliとは異なり、yeomanはスキャフォールディングプラットフォームに似ています。さまざまなジェネレーターでyeomanを使用して、任意のタイプのプロジェクトを作成できます。つまり、独自のジェネレーターを作成できます。独自のフロントエンドスキャフォールディングツールをカスタマイズします。フレームワークベースの開発に焦点を当てている多くの人々の目には、ヨーマンは一般的すぎて十分に焦点を合わせていません。
npmを使用してグローバルにインストールします：yarn global addyo。
Yeomanは特定のジェネレーターで使用する必要があります。対応するプロジェクトタイプのジェネレーターを見つけるには、ジェネレーターノードを使用し、最初にジェネレーターをグローバルにインストールします。yarnglobaladdgenerator-node
yo nodeコマンドは、特定のジェネレーターをインストールします。yoが内部コマンドまたは外部コマンドでない場合、グローバルにインストールされません。グローバルインストールコマンドを使用します。
然后再用yo node
生成された基本的なプロジェクト構造とコード
サブジェネレーター
既存のプロジェクトのreadmeを作成したり、eslint、babelなど、元のプロジェクトタイプに特定のタイプの構成ファイルを追加したりするなど、既存のプロジェクトに基づいて特定のタイプのファイルを作成するだけでよい場合があります。この場合、Yeomanが提供するSubGenneratorを使用できます。
カスタムジェネレーター：
ヨーマン自身の足場に基づいて、ジェネレーターは本質的にNPMモジュールです。
ジェネレータの基本構造：
複数のサーバージェネレーターを提供する必要がある場合は、アプリの同じレベルのディレクトリに新しい同じレベルのディレクトリを追加できます
特定の構造に加えて、別の違いは、ヨーマンのジェネレーターのモジュール名がジェネレーター-<名前>であることです。
$ mkdir generator-sample //创建Generator的文件夹糸を使用してpackage.jsonファイルを作成および初期化します
yarn initヤーンジェネレーターのモジュールをインストールします。このモジュールはジェネレーターのメカニズムを提供します。このメカニズムは、ジェネレーターの作成をより便利にするためのいくつかのツール機能を提供します。
ジェネレーターのエントリーファイル：
ヤーンリンクを使用してこのモジュールをグローバルスコープにリンクし、グローバルモジュールパッケージにします。このようにして、ヨーマンは作業中に独自のジェネレーターサンプルを見つけます。
yarn linkプロジェクトディレクトリでヨーマン操作を実行します
yo sampleテンプレートに基づいてファイルを作成します。
テンプレートに基づいてファイルを作成します。各ファイルを手動で作成する場合と比較して、テンプレートの方法により効率が大幅に向上します。
テンプレートファイルでは、ファイルを生成するときにfsのwriteメソッドを使用してファイルを書き込み、テンプレートメソッドを使用してファイルをターゲットディレクトリに書き込む必要はありません。
ユーザー入力データの受信：
プロジェクトタイトル、プロジェクト名などのテンプレートの動的データの場合、通常、コマンドライン操作を介してユーザーに尋ねることによって取得されます。ジェネレーターでは、コマンドラインインタラクティブクエリを開始する場合、ジェネレータータイプでpromitingメソッドを実装できます。
Vueジェネレーターケース
- Generatorフォルダーを作成して初期化し、yeoman-generatorモジュールをインストールします
$ mkdir generator-vue
$ cd generator-vue
$ yarn init # 或者 npm init
$ yarn add yeoman-generator # or npm install yeoman-generator -D
- vueによって生成されたディレクトリ構造をGeneratorのテンプレートにコピーし、テンプレートファイルとして使用します
vueによって生成されたプロジェクトディレクトリ：
ジェネレータにコピーした後：
- カスタムジェネレーターの手順に従って、書き込み方法を変更します（以前のように単一のファイルを書き込む必要はありません。事前に準備した構造をバッチ生成し、テンプレートディレクトリを作成し、作成した構造をテンプレートにコピーする必要があります）：
const Generator = require('yeoman-generator')
module.exports = class extends Generator{
prompting(){
return this.prompt([
{
type:'input',
name:'name',
message:'Your project name',
default:this.appname
}
])
.then(answers =>{
this.answers = answers
})
}
writing(){//不再像之前写入单个文件，它需要批量把我们刚刚所提前准备好的结构给它批量生成，创建一个templates目录，把我们创建的结构拷贝到templates当中
//把每一个文件都通过模板转换到目标路径
const templates = [
'.browserslistrc',
'.editorconfig',
'.env.development',
'.env.production',
'.eslintrc.js',
'.gitignore',
'babel.config.js',
'package.json',
'postcss.config.js',
'README.md',
'public/favicon.ico',
'public/index.html',
'src/App.vue',
'src/main.js',
'src/router.js',
'src/assets/logo.png',
'src/components/HelloWorld.vue',
'src/store/actions.js',
'src/store/getters.js',
'src/store/index.js',
'src/store/mutations.js',
'src/store/state.js',
'src/utils/request.js',
'src/views/About.vue',
'src/views/Home.vue'
]
templates.forEach(item =>{
//item =>每个文件路径
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answers
)
})
}
}- 空のフォルダー（my-proj）を作成して、テンプレートに従って対応するプロジェクトファイルを生成します。
yoジェネレーターの名前
生成された新しいvueプロジェクトファイル：
リリースジェネレータ
ジェネレーターの公開は、実際にはジェネレーターモジュールの公開です。記述されたジェネレーターモジュールは、npmpublishなどのコマンドを使用してパブリックモジュールとして公開できます。これを行う前に、プロジェクトのソースコードをパブリックソースコードリポジトリにホストします。
git init//初始化本地仓库
git add .
git commit -m"feat:initial commit"
git remote add origin https://gitee.com/lyle1111/generator-zce-vue.git//添加远程仓库
git push -u origin master //提交インターフェイスでreleaseコマンドを実行します。
初めて実行するときは、mpmのユーザー名、メールアドレス、パスワードの入力を求められます。パスワードを入力する必要があるのは、後で入力するときだけです。
ログインおよびログアウト時のコマンド：
yarn login 或者 npm login
yarn logout 或者 npm logout次のエラーは、アカウントをアクティブ化するためにメールボックスに移動する必要があることを意味します。
次のエラーが発生した場合、リリースされたジェネレーターの名前が他のジェネレーターと競合します。
package.jsonの名前を変更するだけです
Taobaoのミラーリソースを使用する場合、Taobaoミラーは読み取り専用であり、モジュールとしてリリースできないため、次のエラーが発生します。
ミラーリソースを変更できます
$ npm config set registry https://registry.yarnpkg.org # yarn 镜像源
$ npm config set registry https://registry.npmjs.org # node 默认镜像源
または、コマンドの直後に関連するミラーリソースに従います
$ yarn publish --registry-https://registry.yarnpkg.com # yarn 镜像源
$ yarn publish --registry-https://registry.npmjs.org # node 默认镜像源
最後に、実行が完了します。
npmの公式Webサイトにアクセスして、リリースされたばかりのモジュールを確認してください。
npmに送信された後、このモジュールはnpmまたはyarnを介してグローバルにインストールでき、yeoman（yo this Generator）で使用できます。
Plop
プロジェクトで特定の種類のファイルを作成するための小さなツール。これはYeomanのSubGeneratorに似ていますが、通常は独立して使用されるのではなく、プロジェクトに統合されて、コンポーネント/モジュールの作成に必要なファイルなど、同じタイプのプロジェクトファイルを自動的に作成します。Plopは、重複ファイルの作成効率を向上させることができます。
ステップ：
- plopモジュールをプロジェクト開発の依存関係としてインストールします
- プロジェクトのルートディレクトリにplopfile.jsファイルを作成します
- plopfile.jsファイルでスキャフォールディングタスクを定義します
- 特定の種類のファイルを生成するためのテンプレートを作成する
- Plopが提供するCLIを介してスキャフォールディングタスクを実行します
使用する：
plopをプロジェクトに統合し、plopモジュールをインストールします
yarn add plop --dev # 或者 npm install plop -D
プロジェクトのルートディレクトリに、新しいprofile.jsファイルを作成して、Plopスキャフォールディングタスクを定義します。
//Plop 入口文件，需要导出一个函数
// 此函数接收一个 plop 对象，用于创建生成器任务
module.exports = plop => {
//setGenerator接收两个参数，一个是生成器的名字，一个是生成器的配置选项
plop.setGenerator('component',{
description:'create a component',
prompts:[
/*
可以在这个Generator当中指定工作的时候会发出的命令行问题，这些命令行问题会出现交互环节
*/
{
type:'input',//指定这个问题的输入方式
name:'name',//指定这个问题的返回值的一个键
message:'component name',//屏幕上给出的提示
default:'MyComponent'//这个问题的默认答案
}
],
actions:[
/*
actions是这个生成器在完成命令行交互过后需要执行的一些动作，可以是一个数组，这个数组当中为每一个动作对象
*/
{
type:'add',//这个动作的类型，为add，代表添加文件，
path:'src/components/{
{name}}/{
{name}}.js',//指定需要添加的文件会被添加到哪个具体的路径
templateFile:'plop-templates/component.hbs'//模板文件
},
{
type:'add',//代表添加文件，
path:'src/components/{
{name}}/{
{name}}.css',
templateFile:'plop-templates/component.css.hbs'
},
{
type:'add',//代表添加文件，
path:'src/components/{
{name}}/{
{name}}.test.js',
templateFile:'plop-templates/component.test.hbs'
}
]
})
}対応するテンプレートファイルを作成します。テンプレートファイルは、Handlebarsテンプレートエンジンを使用して作成され、通常、ルートディレクトリのplop-templatesの下に配置されます。
テンプレートファイル（component.hbs）：
import React from 'react';
//这些文件遵循handlebars 模板语法
export default () =>(
<div className = "{
{name}}">
<h1>{
{name}} Component</h1>
</div>
)plopをインストールすると、PlopはCLIアプリケーションを提供します。yarnはnode_modulesの下のbinディレクトリでコマンドラインツールを自動的に見つけるので、yarnを介してこのプログラムを開始できます。
yarn plop component //yarn plop 定义的Generator名称
成功後：
6、足場の動作原理：
スキャフォールディングツールは、実際にはノードcliのアプリケーションです。
- 新しいフォルダーを作成し、yarn initを使用して初期化してから、初期化されたpackage.jsonに属性binを追加し、エントリファイルを設定して、CLIアプリケーションのエントリファイルを指定します。
- 照会モジュールをインストールし、照会モジュールを使用してユーザーインタラクションを実現します
yarn add inquirer // 或者 npm install inquirer
- ファイルレンダリング用のejsモジュールをインストールします
yarn add ejs // 或者 npm install ejs
- cli.jsファイルを作成します
#!/user/bin/env node
// Node CLI 应用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改
// 脚手架的工作过程：
// 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(answers => {
// 根据用户回答的结果生成文件
// 模板目录
const tmplDir = path.join(__dirname, 'templates')
// 目标目录
const destDir = process.cwd()
// 将模板下的文件全部转化到目标目录
fs.readdir(tmplDir, (err, files) => {
if (err) throw err
files.forEach(file => {
// 每一个file都是相对于templates下的相对路径
// 通过模板引擎渲染文件，这里采用 ejs
/**
* renderFile() 方法 接收三个参数
* 一，文件的绝对路径
* 二，渲染的数据
* 三，回调函数
*/
ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {
if (err) throw err
// 将结果写入目标文件路径
fs.writeFileSync(path.join(destDir, file), result)
})
})
})
})
