如何从零开始创建一个基本前端应用（未完成）

用户108490354270
105 阅读5分钟

主要讨论了如何实现一个基本前端应用的基础设施

大致路径：

  1. 使用react推荐的‘createReactApp’插件创建基本项目

  2. 添加typescript依赖

  3. 添加/初始化包管理工具yarn

  4. 添加前端组件库antdesign

  5. 添加webpack依赖

  6. 添加express依赖

步骤1: 创新一个新folder用于当作工程文件夹，并且在里面运行指令yarn create react-app my-app 我们得到了一个基本的应用工程库，它可以实现一个以react实现的单组件demo。它包含了一个基本的带有root节点的html文件，用JS实现的一个用于将react组件链接到root节点的index文件，用JS实现的一个基本react的demo组件，一份react组件对应的测试，一份描述了当前项目属性的的package.json文件。

其中：在 package.json文件中引入了React需要的依赖，包括

  • React: React库，用于创建react视图
  • React-dom：React基本依赖之一，用于在浏览器中渲染 UI组件
  • React-script：一套基本的项目管理工具，主要功能包括打包，运行测试，运行dev环境等
  • @testing-library/jest-dom：用于提供可以实现测试断言的matcher，比如toHaveTextContent
  • @testing-library/react：用于提供基本的用于测试react的render方法、debug等
  • @testing-library/user-event： 用于提供在测试中的用户交互事件，比如：click

以及4个用react-script实现的初始指令：

  • start: 主要是用react-script启动一个dev-server，可以通过访问其默认端口直接访问当前开发的应用，支持热加载
  • build：主要是用react-script实现打包
  • test：运行所有测试文件
  • eject：用于将项目所有的配置文件暴露出来，此过程不可逆

一份eslint的配置：EsLint配置既可以写在eslintrc文件中，也可以写在package.json中。它描述了此eslint规则继承‘react-app’规则。此‘react-app’是一个npm包，由包管理器在创建项目的时候下载并开箱直接使用

和一份声明目标浏览器的配置

步骤2. 添加typescript依赖

由于createReactApp默认采用JS，所以这里需要添加关于Typescript的相关依赖以及将代码文件转换成为TS文件

大概的工作流程是这样的，整个应用在开发环节使用typescript，同时开发环节的测试也使用typescript。最后，当应用要发布的时候，使用typescript编译工具将代码编译成为JS用来发布。

首先安装typescript相关依赖。就像前面所说，typescript主要工作在开发期，所以typescript相关依赖建议安装在npm的dev dependency中，以确保在发布版本中不会出现。这里主要添加typescript，ts-loader和source-map-loader三个依赖以及类型声明文件@types/react @types/react-dom。

之后在src目录下新建一个tsconfig.json文件。这个文件声明了将TS代码编译成为JS代码的转换过程的配置。其中比较关键的是"allowSyntheticDefaultImports": true这个配置，由于TS和JS的import语法是不一样的，所以当要编译TS语句成为JS语句的时候，编译器会默认输入语句时TS而输出是JS。但是此时由于老版的代码是JS的import语句，所以在转换的过程中会报错。此时有两个解决方案，要么在更改js后缀名到ts的时候同时更换import语句，或者将上述配置设置成为‘true’。该配置的意思是，如果出现了非TS语句的无法识别的import语句，那么就尝试使用JS的语句来对待。

//tsconfig.json
{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

此时tsconfig.json文件如上所示声明了编译后的输出目录，是否允许js语句作为输入，输出的目标语法，以及要在哪些目录下扫描ts文件。 此时

  1. 使用yarn init来初始化yarn依赖。它会创建一个’yanLock’来锁住当前版本。同时使用‘antd’文档中的命令添加antd组件库

  2. 添加webpack打包工具：在本项目中，目前，webpack主要有两个作用，一个是将React按照业务逻辑拆分好的组件打包成按类型分的少数文件，一个是使用他的热加载功能实现开发代码的实时预览。

它的相关配置被写在‘webpack.config.js’中。其中值得注意的是，webpack原生只能处理简单的JS文件，对于额外的文件类型需要添加‘loader’进行处理。另外，对于额外的需求比如要求将源代码中的html文件同时拷贝到打包好的文件中，需要额外添加插件。

注意 node生态中有两种模块（module），一种是commonJs，另一种是ESmodlule。Node默认将模块视为commonJs来解释。这意味着，在默认情况下，js和mjs作为扩展名的文件将被以commonJs的模式进行解释。而单独的以mjs作为扩展名的文件将会以ESmodule的形式进行解释。相反，在设置的解释器的情况下，js/mjs文件将被以ESmodule的形式进行解析，而cjs文件将被认为是commonJs。在node应用中，可以通过调整package.json中的type字段进行调整

avatar
文章
阅读
粉丝