フロントエンドの足場は、玄に聞こえますが、実際には?

冒頭
初めて足場を聞いたのは、私がVueに接触したばかりで、ネット上の大物の文章について、Vue-cliで0からVueプロジェクトを構築して、一歩一歩配置して、それからnpm i、npm run dev、リンクを開けて、1つのホームページはこのように書いて、その時npm、webpackこれらの先端の工事化について何も知らないで、口の中で思わず2つの字を吐き出しました:'NB'です.1年後、ある新猿がSegmentfaultでこのような質問をした.
そして私は知っているふりをして答えました.答えはこうです.
乱暴に言えば、このような答えは、何の欠点もないようだ.しかし、学習の態度に基づいている以上、今回は先端足場の存在意義をよく話してみましょう.いったい何の鬼なのか、足場を書くのはどれだけ難しいのか.では、次のセクションで説明します.

フロントエンド足場の存在意義

足場の実質

自分の足場がどれだけ難しいかを書く

フロントエンド足場の存在意義
フロントエンドのエンジニアリング化の概念がますます浸透するにつれて、足場の出現は重複作業を減らすために導入されたコマンドラインツールであり、ctrl+c、ctrl+vを脱し、zenjiang?現在、新しいフロントエンドプロジェクトが作成され、htmlヘッダにcssを導入するのではなく、テールにjsを導入するのは簡単です.cssはSassまたはLessで作成され、jsに導入され、htmlに動的に構築されます.基本的なjs、css文法と人気のあるフレームワークを学ぶだけでなく、構築ツールwebpack、babelなどの構成、フロントエンドサービス、どのようにホット更新するかを学ぶ必要があります.編集中にエディタがエラーを調べ、より規範化するために、ESlintを導入する必要があります.さらに、一部のプロジェクトでは、ユニットテスト(Jest)を導入する必要があります.もっと入門した人にとって、これは間違いなく人を退却させます.フロントエンドの足場の出現は、事を簡単にして、1つのコマンドをクリックして、1つの工事を新築して、更に2つのnpmコマンドを実行して、1つのプロジェクトを走り始めます.入門時には、構成に注目する必要はなく、コードを書くのが楽しいだけです.また、多くのシステムに対して、彼らのページの類似度は非常に高いので、テンプレートに基づいて構築することができ、異なる人が開発したが、足場で構築し、同じプロジェクト構造とコードの書く規範は、プロジェクトの後期メンテナンスに有利である.以上、足場が存在する意味で、プロジェクトを「構築-開発-導入」からより迅速かつ規範化しています(ある達人から).
足場の本質
現在流行しているフロントエンドの足場はすべてNodeJsに基づいて編纂されています.例えば、前述のVue-CLI、比較的火のcreate-react-app、そしてDva-CLIと当社のcurieは、人気のあるフレームreactとvueのプロジェクト足場で、その機能はすべて共通のディレクトリ構造を生成し、構築、コンパイル、検査などの工事環境を備えています.大まかな流れは以下の通りです.

は、ユーザが入力したコマンドを解析する.

はpackageのような構成化ファイルを生成する.json、またはwebpack.config.jsなど;

は、ユーザの入力に基づいて対応するテンプレート項目を生成する.(上位のctrl+c,ctrl+v)

このテンプレートをインストールするために必要な環境.

まずcreate-react-appを例にとると、ネット上にはcreate-react-appのソースコードを読む文章がたくさんあります.ネットで検索して、お勧めします.そのコードは多くなくて、読むのも比較的に容易で、最も主要なのはcreate-react-appがある程度1,2歩のことしかしていません(もちろん4もいくつかしました)、第3歩はreact-scriptsによって完成して、もちろんそのもう一つの重要な役割は、このプロジェクトの構築コンパイルツールとして、だからあなたはpackageにいます.jsonでは下図右側のコマンドも見られます(おなじみのnmp start、有木有):
したがって、create-react-appは主にコマンドを解析し、ファイルの操作を実行し、react-scriptsは主にテンプレートとテンプレートに必要なプロジェクトエンジニアリング構成を提供し、図の左側に示すように、webpackとjestテストに関する構成ファイルが含まれていることがわかります.vue-cliの実装はcreate-react-appとは少し違います.まずvue-cliの新築工事は、カスタマイズを行うために一歩一歩問答式のコマンドであり、後者はワンタッチで行われている.vue-cliのプロジェクトテンプレートはgithubに由来し、複数のテンプレート(vue listで表示可能)をサポートし、gitでダウンロードした具体的なテンプレート構成はここを参照し、後者のテンプレートはreact-scriptsディレクトリの下の2つのフォルダ(上図のtemplateとtemplate-typescript)から来ている.vue-cliが構築したプロジェクトは、browserifyやwebpackのような構築ツールに直接依存し、構成は完全に使用者に露出し、再カスタマイズすることができ、後者はwebpackに基づいてカプセル化され、新しい構築命令に暴露され、npm run ejectを実行して構成を暴露することもできる.dvaは比較的成熟したreactソリューションであり、中バックグラウンドシステムに適しており、dva-cliは前の2つと強い類似性を持っており、roadhogをその構築コンパイルツールとして採用しており、開発者は、構築構成に関心を持つ必要はなく、業務コードの実現に関心を持つだけである(だから大工場の私たち自身が注意しないとコード畜に発展しやすい).プロジェクト生成後、コマンドでページを追加することで、ctrl+c、ctrl+vの一部を減らすことができます.以上、フロントエンド足場の実質は2つあり、コマンド式の構築プロジェクト(解析コマンド、プロジェクトをローカルにコピー)は、プロジェクトの構成(構築、コンパイル、コード仕様検査)を提供します.
自分の足場を書くのがどんなに難しいか
考えを整理する.
前の2つのセクションの説明から、実装する機能を大まかに整理します.

コマンドの解析は、commanderによって実現することができる.

ファイルの操作、コピー、貼り付け、追加、削除、ファイル内容の追加、置換;これはfs-extraによって実現することができる.

テンプレートファイルは、フロントエンドの工程化に対する浅い認識で、最も牛(cu)が追い詰めたテンプレートプロジェクトを書いた.

npmアカウントを申請し、これは実現した機能ではなく、付属の仕事を計算します.

以上、実現はとても簡単なのではないかと感じました.感覚ではなく、確かに簡単です.プロセスは次のとおりです.
インプリメンテーションコード
コマンド解析:

    
    //     。   git        
    const tempIndex = {
      react: 'reactTemplate', // react   
      vue: 'vueTemplate', // vue   
      h5: 'h5Template', // h5  
      dva: 'dvaTemplate', // dva  
    };
    
    let projectName;  //     
    let templateName; //     
    let inputIndex; //       ，            ，         
    const program = new commander.Command(packageJson.name)
      .version('v' + packageJson.version, '-v, --version')
      .arguments('')
      .arguments('')
      .option('-f, --force', 'force delete the exist director')
      .option('-d, --directly', 'copy the not specified template')
      .alias('cp')
      .description('create-doddle react myProject')
      .action(function (index,name) {
        inputIndex = index;
        //                      
        if (tempIndex[index] || tempIndex[name]) {
          if (tempIndex[index]) {
            templateName = tempIndex[index];
            projectName = name;
          } else {
            templateName = tempIndex[name];
            projectName = index;
          }
        }
        if (program.directly) {
          templateName = index;
        }
      });
    program.parse(process.argv)
    //         ，     ，   help
    if (program.args.length === 0) {
      console.log(chalk.red('syntax error'));
      program.help()
    }
    
    if (templateName) {
      excute(templateName, projectName, program.force);
    } else {
      console.log(`the template ${inputIndex} you want download do not exist`);
    }  
    

ファイルコピー:

    async function create(temp, project, force = false) {
      tempName = temp;
      projectName = project;
      forceDel = force;
      const file = currentPath + projectName;
      try {
        //             ，    ，    
        const res = await fs.pathExists(file);
        if (res) {
          if (forceDel) {
            console.log(green('force remove the exist directory'));
            await fs.remove(file);
            downloadByGit(renameFile, tempName);
          } else {
            //     ，       -f             
            console.log(chalk.red('Error, In this directory, the project name already exsits !'));
            console.log(chalk.green('you can use option -f to force delete the directory !'));
          }
          return;
        }
        //     ，   git  
        downloadByGit(renameFile, tempName);
      } catch (err) {
        console.error(red(err));
      }
    }

chalkについては、印刷する文字を異なる色でマークするカラータグプラグインです.次のようにします.
gitファイルのダウンロード:

    function downloadByGit(callback, template) {
      console.log(green('start download'));
      console.log(`[email protected]:closertb/${template}.git`);
      const result = spawn(
        'git',
        ['clone', `[email protected]:closertb/${template}.git`],
        { stdio: 'inherit' }
      );
      const error = result.error;
      if (error) {
        console.log(red(error));
        return;
      }
      //     ；
      callback && callback();
    }

主にこの3つのコードについて,コマンドの解析とgitソース側からテンプレートをローカルにコピーすることを実現した.
実行可能コマンドの作成
フロントエンドのエンジニアリングについて少し知っていれば、プロジェクトについてnpm run startやnpm run devのような実行可能なコマンドを作成するにはpackage.jsonのscriptsを定義します.vue init webpack myappやdva init myappを作成するコマンドはどうすればいいのでしょうか.広告の後、すぐに発表します(自分で楽しむ中で、O(∩~∩)Oを無視してください!)第一歩:あなたのプロジェクトのpackage.jsonにbinプロパティを入力し、実行可能であることを示し、実行可能なコマンドとエントリファイルを構成します.
ステップ2:あなたのエントリファイル(私はルートディレクトリのindex.jsです)の最初の行にコードを追加します:#!/usr/bin/env nodeは、オペレーティングシステムにこのスクリプトを実行するときに、/usr/binの下のnode解釈器を呼び出すように伝えます.
第三歩:あなたのnpmアカウントにログインして、npm publishを実行してあなたのnpmパッケージを発表して、参考にしたリンクはここまでで、簡単な足場は書き終わりました.
最後に
人は年を取って、いつも最後に2つの小言を言うのが好きで、実はvue-cliに関わらず、create-react-appに関わらず、あるいはdva、その核心機能(最も牛が追い詰めた)は命令の解析あるいはテンプレートのコピーではありませんて、この部分はただその足場のとても小さい部分を占めて、多く見えるのは、それが多くの互換性をしたためで、例えば助けて、誤りの検出、システムのネット環境の検査、これらの操作をロールバックしますが、これもコアではありません.個人的にはコアはreact-scriptsやroadhogなどの構築コンパイルスクリプトだと思いますが、結局はbabelやwebpackなどのライブラリを深く理解し、この文章を見てここまで来たあなたにも、自分を励まして、頑張り続けなければなりません.
プロジェクトソースアドレス:create-doddlenpmパッケージアドレス:create-doddle先発アドレス:Denzel Blog