[Yuanchuang エッセイコンテスト] Vue3 エンタープライズレベルのエレガントな実践 - コンポーネントライブラリフレームワーク - 2 workspace-root の初期化

pnpm + monorepoの基本環境は上記で構築されています. この記事では、共通構成ファイル、パブリック依存関係、および ESLint を含むworkspace-rootの構成を初期化します。

1 共通設定ファイル

次の構成ファイルをプロジェクトのルートディレクトリに追加します。

.editorconfigエディター形式の構成ファイルを追加します

[*.{js,cjs,ts,jsx,tsx,vue,html,css,scss,md}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

.gitignore gitignore ファイルを追加

logs
*.log*
node_modules
dist
lib
dist-ssr
*.local

.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

説明:

一部の記事では、.npmrcファイルが作成され、 shapeful-hoist がtrueとして設定されます。この操作の目的は依存関係を改善することですが、pnpm はこれを推奨していないため、設定しません。

2 パブリック依存関係をインストールする

ルートディレクトリで指定された依存関係はサブモジュールで使用できるため、異なるモジュールに同じ依存関係がインストールされるのを避けるために、同じ依存関係をルートプロジェクトに抽出します。

pnpm install vue -w
pnpm install @types/node sass typescript vite vue-tsc @vitejs/plugin-vue @vitejs/plugin-vue-jsx -D -w

私たちのプロジェクトはmonorepoで構成されているため、依存関係をルートディレクトリ ( workspace-root )にインストールするときに-wを指定する必要があります。そうしないとインストールが失敗します。

3 ESLint の設定

すべてのモジュールはESLint検証を必要とするため、 ESLint はルートディレクトリで構成できます。

ESLint の設定プロセスは、以前に書いた「vite + vue3 プロジェクトの作成」の手順と基本的に同じですが、monorepoに若干の違いがあります。ここで繰り返します。

開発依存関係をインストールします。

pnpm install eslint -D -w

ESLint 構成を初期化する

npx eslint --init

上記のコマンドを実行すると、次の手順がコンソールに表示されます。

1）需要安装 @eslint/create-config，问是否继续： 当然需要继续，直接回车；
2）使用 ESLint 来干嘛：我选最后一个 To check syntax, find problems, and enforce code style（检查语法、寻找问题、强制代码风格）
3）使用哪种模块化的方式：肯定选 JavaScript modules (import/export) （几乎我参与的 vue 项目都是 ESModule）
4）项目使用什么框架：Vue.js
5）项目是否使用 TypeScript：Yes
6）项目运行在什么环境：Browser
7）如何定义项目的代码风格：Use a popular style guide 使用流行的风格
8）在流行的风格中选择其中一种：Standard
9）ESLint 配置文件的格式：JavaScript
10）根据上面选择的，提示需要安装一大堆依赖，是否安装？Yes
11）选择使用什么包管理工具安装：pnpm

pnpmを選択して Enter キーを押すと、 .eslintrc.cjsファイルがプロジェクトのルートディレクトリに生成されますが、次に示すように、コンソールではERR_PNPM_ADDING_TO_ROOTエラーが報告されます。

画像-20221104163126384

これは、自動的にインストールされる依存関係には-w が含まれていないため、赤いボックス内の依存関係をコピーして再インストールする必要があります。

pnpm install eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest -D -w

vite-plugin-eslintプラグインをインストールします。

pnpm install vite-plugin-eslint -D -w

パッケージや vite の構成が異なるため、プラグインは後で各モジュールを開発するときにのみ構成されます。

ESLint 構成ファイル.eslintrc.cjsを変更します。

module.exports = {
    
    
  root: true,
  env: {
    
    
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  parserOptions: {
    
    
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    
    
    'vue/multi-word-component-names': 'off'
  }
}

ESLint 無視ファイルを追加し、パッケージ化によって生成されたディレクトリdistおよびlibを無視します。次の内容を含む.eslintignore をプロジェクトのルートディレクトリに作成します。

lib/
dist/

IDE で ESLint を構成します。私はWebStormを使用しており、構成は次のとおりです。

この記事では、workspace-root の初期構成が完了しました。次のステップでは、コンポーネントライブラリの開発環境を構築します。

この記事を読んでいただきありがとうございます。この記事が少しでも役に立ったり、インスピレーションになった場合は、いいね、フォロー、集めて三回連続で応援してください。プログラマーエレガントブラザーは今後もより有益な情報を皆さんに共有していきます。