起因：
フロントエンド開発はエンジニアリング プロセスです。継続的インテグレーションと継続的デプロイメントが含まれます。
統合の最初の側面は開発だと思いますが、フロントエンドプロジェクトの開発では、コード形式の仕様、コードの品質、提出計画の統一性を確保する必要があります。これらの要件には、標準化されたプロセス指向の開発を保証するためのさまざまなプラグインが必要です。これらのプラグインの設定方法とそれぞれの機能は何ですか? これらを知らなくても開発はできますが、一度問題が起きると盲目になってしまいますので、勤続年数が増えるにつれ、これらをできるだけ早く習得する必要があります。それもいいけど、私がこの記事を書いている理由。
1. プロジェクトを作成する
ここでは、パッケージ化ツールは webpack の代わりに vite を使用します。webpack と vite の違いについては、***を参照してください。
npm init vue npm init vue コマンドを使用して 、新しい vue プロジェクトを初期化します。ここでは、足場を介してプロジェクトを作成しません。したがって、選択する場合、jsx、ts、eslint、および単一テストの選択肢はすべて「いいえ」になります。
プロセスを次の図に示します。
このようにして、純粋な vue プロジェクトを作成しました。
後続の変更を容易にするために、ここでは app.vue ファイルを 1 つだけ保持することをお勧めします。他のすべての vue ファイルは削除されます。
2. プラグインの導入
2.1 jsxの導入
Vue には開発をスムーズに行うためのテンプレート開発構文が用意されていますが、実際の開発ではまだ制限があります。ただし、ユースケースによっては、JavaScript のプログラミング機能をすべて使用する必要があります。ここでレンダリング機能が役に立ちます。JSX は、レンダリング関数に近い開発形式です。
@vitejs/plugin-vue-jsxプラグインをインストールすることでjsx を開発できます。
因为这个插件是用来辅助开发的，所以最好将其安装在 devdependency 中
npm i @vitejs/plugin-vue-jsx -D次に、vite.config.js にプラグインを導入し、プラグインに追加します。
// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
plugins: [
vueJsx({
// options are passed on to @vue/babel-plugin-jsx
}),
],
}app.vue ファイルを jsx ファイルに変更するだけです。最も単純な jsx ファイルは次のようになります。
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
return () => (
<div>
Hello world!
</div>
)
}
})
JSX とテンプレートの記述の違いについては、ここでは詳しく紹介しません。
2.2 tsの導入
ts は、開発プロセス中の開発品質を向上させるための保証でもあります。現在、どこにでも型を追加するのは非常に面倒であると批判する人もいますが、いつでも自由に型を推論するよりは快適です。
以下のコマンドで ts をインストールします。
npm install --save-dev typescript@vue/cli-plugin-typescriptts-loader の構成は内部的にプリセットされているため、個別に構成する必要はありません @vue/cli-plugin-typescript の概要
ts-loaderなどをインストールします。
npm install --save-dev @vue/cli-plugin-typescript参照構成である tsconfig 構成を追加します
{
// 编译过程中的参数
"compilerOptions": {
// 在 .tsx文件里支持JSX： "React"或 "Preserve"。因为是vue 中的编译，所以是preserve
"jsx": "preserve",
// 指定ECMAScript目标版本
"target": "esnext",
"module": "esnext",
// 启用严格检查
"strict": true,
// 从 tslib 导入辅助工具函数（比如 __extends， __rest等）
"importHelpers": true,
// 决定如何处理模块。或者是"Node"对于Node.js/io.js，或者是"Classic"（默认）。查看模块解析了解详情。
"moduleResolution": "node",
// 启用实验性的ES装饰器。
"experimentalDecorators": true,
// 显示详细的诊段信息。
"esModuleInterop": true,
// 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
"allowSyntheticDefaultImports": true,
// 生成相应的 .map文件。
"sourceMap": true,
"baseUrl": ".",
// 允许编译javascript文件，默认为false
"allowJs": false,
// 要包含的类型声明文件名列表。
"types": [
"webpack-env"
],
// 模块名到基于 baseUrl的路径映射的列表。
"paths": {
"@/*": [
"src/*"
]
},
// 编译过程中需要引入的库文件的列表。
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
// 需要编译的文件
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
// 不需要编译的文件
"exclude": [
"node_modules"
]
}
2.3 Sass の導入
.scssVite は、、、、およびファイルの組み込みサポートを提供し.sassます。したがって、特定の Vite プラグインをインストールする必要はありませんが、対応するプリプロセッサの依存関係をインストールする必要があります。依存関係がインストールされた後、プロジェクトは Less ファイルを直接解析できます。.less.styl.stylus
$ npm install less less-loader -D
# or
$ yarn add less less-loader -Dここには落とし穴があることに注意してください。less およびless-loader を devDependency に書き込む必要があります。そうしないと、実行時にエラーが報告されます。
2.4 eslintの導入とprettierの導入
これら 2 つを紹介するには、 vue3+ts+vite プロジェクトでの eslint+prettier+stylelint+husky の使用に関するガイド - Nuggets を参照します。
この記事では非常に詳しく説明しているので、ここでは詳しく説明しません。
3. 引用
1. 「npm init vue@latest」で何が起こったかを完全に理解する - Nuggets
4. この記事では、jsx記述とテンプレート記述の違いや、jsx記述のメリットについて紹介します。Vue 3 での JSX の探索 - Nuggets
5. tsconfig 公式ドキュメント: コンパイル オプション · TypeScript 中国語 Web サイト · TypeScript - JavaScript のスーパーセット
4. まとめ
これは単純な構成です。パッケージ化後のファイルにアクセスできるという保証さえありません。
各構成の役割は明確に説明されていません。
以下に、執筆プロセス中に提起された疑わしい問題のリストを示します。後で記入してください。
1. vite と webpack の違いは何ですか?
2. css と比較した sass と scss の違いは何ですか? 規制は何ですか? プロジェクトの実際的な側面は何ですか? 書き込みプロセスの利便性を実現し、コンパイル後にブラウザ上で正常に動作するには、どのようなプラグインを使用する必要がありますか? 各プラグインの機能は何ですか?
3. 開発段階ではtsも導入されていますが、コンパイル後はpure jsになるのでしょうか？構成された tsconfig はどこで実行されますか?
4. eslint と prettier はインストール後にどこで実行されますか? それぞれの構成は何を意味しますか?
これらの問題が解決されると、開発段階のエンジニアリングが簡単に理解できるようになります。