一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して2日目です。クリックしてイベントの詳細をご覧ください。

日常の開発では、私たち全員がこのシナリオに遭遇します。新しいモジュールを開発するたびに、手動でファイルを作成し、それにデフォルトのコンテンツを追加する必要があります。特にコンポーネントライブラリの開発では、一度に複数のファイルを作成する必要があります。

今日は、自動ファイル生成モジュールツールplopをお勧めします。これにより、必要なモジュールをコマンドの形式ですばやく生成でき、開発が大幅に容易になります。

インストール

plopグローバルにインストールするか、プロジェクトにインストールするかを選択できます。ここでは、プロジェクトでのインストールを使用します

pnpm i plop -D
复制代码

インストールが完了したらpackage.json、script実行コマンドをに追加します。ルートディレクトリにplopfile.jsファイル、ファイルパスを再指定する必要があります。

"p": "plop --plopfile ./plop/generator/create-module.js"
复制代码

構成テンプレート

現在のディレクトリ構造は次のとおりです。

1649315453（1）.png

複数のページの形式で、各ページには3種類のファイルhtml、、、およびいくつかのデフォルトコンテンツがあります。javaScriptcss

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Test</title>
  </head>
  <body>
    <div class="test">
      test.html
    </div>
  </body>
</html>

复制代码

javaScript

import './test.less'

复制代码

以下

@import '@/assets/fonts/iconfont.css';

复制代码

次に、基本的なテンプレートの作成に役立つように構成plopする

まず、ルートディレクトリの下にplopディレクトリてテンプレート構成コードを配置し、ディレクトリの下plopに作成generatorし、テンプレートコードの配置に使用される生成されファイルテンプレートコードを配置します。templategeneratorploptemplate

次にgenerator、のcreate-module.js下にファイルを作成し、次のコードを追加します

// 首字母转大写
const toUpperCase = (str) => str.charAt(0).toUpperCase() + str.slice(1)

module.exports = function (plop) {
  plop.setGenerator('createModule', {
    // 提示
    description: '创建一个模块',
    // 选项步骤
    prompts: [
      {
        type: 'input',
        name: 'moduleName',
        message: '请输入模块名称'
      }
    ],
    actions: function (data) {
      // data 可以拿到所有 prompts 中的 name 字段，也就是所有步骤所输入或选择的参数
      const { moduleName } = data

      // 首字母大写
      const upperFirstName = toUpperCase(moduleName)

      const actions = []

      if (moduleName) {
        actions.push(
          {
            // 类型新增
            type: 'add',
            // 存放路径
            path: `../../src/views/${moduleName}/${moduleName}.html`,
            // 使用哪个模版
            templateFile: '../template/create-module-html.hbs',
            // 可以传递参数
            data: {
              moduleName,
              upperFirstName
            }
          },
          {
            // 类型新增
            type: 'add',
            // 存放路径
            path: `../../src/views/${moduleName}/${moduleName}.js`,
            // 使用哪个模版
            templateFile: '../template/create-module-js.hbs',
            // 可以传递参数
            data: {
              moduleName
            }
          },
          {
            // 类型新增
            type: 'add',
            // 存放路径
            path: `../../src/views/${moduleName}/${moduleName}.less`,
            // 使用哪个模版
            templateFile: '../template/create-module-less.hbs'
          }
        )
      }
      return actions
    }
  })
}

复制代码

実行コードを作成したら、テンプレートコードを作成する必要があるplopため、にtemplateディレクトリを追加し、3つのファイル、、、を作成しcreate-module-html.hbsてcreate-module-js.hbs、create-module-less.hbs次のコードを追加します。

create-module-html.hbs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>{{ upperFirstName }}</title>
  </head>
  <body>
    <div class="test">
      {{ moduleName }}.html
    </div>
  </body>
</html>

复制代码

create-module-js.hbs

import './{{ moduleName }}.less'

复制代码

create-module-less.hbs

@import '@/assets/fonts/iconfont.css';

复制代码

この時点で、plop構成は終了です。pnpm run pコマンドを実行してみてください。コンソールに表示されます。

次に、作成するモジュールの名前を次のように入力します。mian

上記のプロンプトsrc/viewsが表示されると、で作成されたmainモジュールが表示され、その中のファイルのコンテンツにも初期コンテンツが含まれています。

要約する

plopこれにより、開発効率が大幅に向上します。特に、モジュールに初期ファイルが多数ある場合は、効果がより明確になり、手動エラーの可能性が低くなります。

さらに構成が必要な場合は、公式ドキュメントplopドキュメントをお読みください

記事のplop構成自分でコードをプルしてみることができます。プロジェクトのデモ

ファイルモジュールツールを自動的に生成します-plop

インストール

構成テンプレート

要約する

おすすめ