700字范文 > 前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

前端工程化 | vue3+ts+jsx+sass+eslint+prettier 配置化全流程

时间：2022-06-14 12:02:07

起因：

前端开发是一个工程化的流程。包括持续集成、持续部署。

我认为集成的第一方面就是开发，在前端项目开发中，需要保证代码格式规范的统一、代码质量、提交的规划。而这些要求需要通过各种插件来保证规范化和流程化开发。如何配置这些插件，这些插件各自的功能是什么？尽管不知道这些也能进行开发，但是，一旦出现问题，就会出现两眼一抹黑的情况，而随着工作年限的增长，我们需要尽快对这些东西进行掌握。这也行，我写这篇文章的原因。

一、创建项目

这里我们打包工具使用 vite 而不是webpack。关于webpack和vite的差别可以参考：***。

我们通过npm init vue npm init vue 命令来初始化一个新的vue 项目。这里我们不通过脚手架来创建项目。所以在选择时，jsx、ts、eslint、单测的选择都是no。

过程如下图所示：

这样，我们就创建了一个纯净的vue 项目。

为了方便后续改造，建议这里只保留一个 app.vue 文件。其余的vue 文件都删掉。

二、引入插件

2.1 引入jsx

尽管vue为了开发的流畅，提供了template开发语法，但在实际开发中，还是会受限。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。而JSX 就是贴近渲染函数开发的一种形式。

我们可以通过安装 @vitejs/plugin-vue-jsx 插件来进行jsx 开发。

因为这个插件是用来辅助开发的，所以最好将其安装在 devdependency 中npm i @vitejs/plugin-vue-jsx -D

然后在 vite.config.js 中引入插件，并将其添加至 plugins 中。

// vite.config.jsimport 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 和 template 的写法区别。

2.2 引入ts

ts 也是我们在开发过程中，提升开发质量的保证。虽然现在也有一些人诟病，任何地方都要添加类型是一件非常令人痛苦的事情，但总比，时刻都是随意推断类型来的舒适些。

通过下面的命令安装 ts。

npm install --save-dev typescript

@vue/cli-plugin-typescript内部预置了ts-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"]}