前端小白Step1-开发环境构建

作为一名有着近10年后端开发经验的程序员，突然意识到要想清晰表达自己的想法和产品观念，但是完全不懂前端开发。。。Emoing，所以励志要能够做到用页面表达自己的想法和设计。2023.09.04开始打卡前端开发了。第一课调通前端开发环境

目前主流的前端开发框架还是Vue、React和Angular。但是因为自己要借鉴的项目主要是用React+TypeScript编写的代码。本着实用的初衷，本人选择从React+Typescipt 入手了。上手之前，先去B站看了下相关的资料，然后还是本着实用为主，边看边弄。首先搞定开发环境，此时流向的打包工具有Webpack 和vite 参考：https://blog.csdn.net/weixin_42991716/article/details/115803348 行了选择vite 了。

开发环境准备：

• 安装Node.js

　　　　官网：https://nodejs.org/zh-cn

　　安装长期维护的稳定版本，查看版本号：

1 2 3

node -v npm -v

　　

• 安装yarn

1	npm install -g yarn

• 创建开发环境

1 2 3 4 5 6 7 8 9 10 11

\study>npm init vite √ Project name: ... demo1 √ Select a framework: » React √ Select a variant: » TypeScript Scaffolding project in E:\study\demo1... Done. Now run:   cd demo1   npm install   npm run dev

　　至此前端项目已经完成创建！

创建完成后，

，这一堆文件都是啥跟啥？没办法硬着头皮看吧，找资料！

逐一解释说明：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

1. .vscode -------毫无疑问，IDE自动生成的目录 2. node_modules -------用来存放项目所依赖的npm包及其相关依赖，以供应用程序在运行时动态加载所需的模块和库文件。当使用npm或者yarn等包管理工具安装npm包时，会将相关依赖包下载并保存在项目的node_modules目录下，以便于在应用程序中引用和使用这些包。 3. public -------默认创建的前端静态资源文件夹,通常项目会再指定自己的静态资源文件夹 4. src -------默认创建的前端源码文件夹 5. .eslintrc.js -------eslint配置文件，ESLint是一款代码开发工具,能够协调和统一团队的编码风格.刚开始接触ESLint的开发者,使用时会感觉处处受挫.ESLint的本质就是提供规范,制定条条框框去限制开发者的编码.比如ESLint里定义的这样的规则,代码缩进只能用2个空格,如果你用4个空格就会报错。.eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件，这里使用 .js文件。.eslintignore文件,设置需要被ESLint忽略的文件,文件中填入下面代码.以下标注目录下的文件,ESLint不会对其做语法检查. 6. .gitignore -------git忽略文件 7. index.html -------默认创建的html文件 8. package.json -------npm的配置文件,确定当前项目直接依赖的包版本的范围（例如：^1.0.0表示的是大于等于1.0.0小于2.0.0）只依赖package.json管理包会有两个缺点：     * . 同一份package.json安装的依赖版本可能不同，如果依赖包有小版本更新并且引入了bug会导致重新装包的项目报错。     * . package.json中声明的只是直接依赖，依赖的依赖无法通过package.json控制。 9.  package-lock.json -------npm5以后生成的文件,将npm依赖包的范围精确到具体版本 10. README.md -------默认创建的说明文件 11. tsconfig.json -------TypeScript 使用 tsconfig.json 文件作为其配置文件，当一个目录中存在 tsconfig.json 文件，则认为该目录为 TypeScript 项目的根目录。通常 tsconfig.json 文件主要包含两部分内容：指定待编译文件和定义编译选项。 12. tsconfig.node.json -------使用vite初始化创建的ts的配置文件，tsconfig.json为主配置文件，包含tsconfig.node.json从配置文件，这两个配置文件有不同的作用和功能，后下面说明 13. vite.config.ts -------使用vite打包时的配置文件

　　关于tsconfig两个配置文件的说明：参考 https://stackoverflow.com/questions/72027949/why-does-vite-create-two-typescript-config-files-tsconfig-json-and-tsconfig-nod

1 2 3 4 5

需要两个不同的 TS 配置，因为该项目使用两个不同的执行 TypeScript 代码的环境: 1.您的应用程序(src 文件夹)在浏览器中定位(将运行) 2.Vite 本身(包括它的配置)在您的计算机上运行在 Node 内，这是完全不同的环境(与浏览器相比)，具有不同的 API 和约束 所以这两个环境有两种不同的配置和两组不同的源文件...... 不，您可能不想删除 tsconfig.node.json但您可能可以将其重命名为 tsconfig.vite.json使其目的更明确

　至此开发环境相关的文件目录结构总体上说明完成，接下来就可以开始我们的代码开发了