前端项目搭建部署全流程（一）：搭建React项目

最新推荐文章于 2024-05-31 18:39:49 发布

一个爱编码的程序猿

最新推荐文章于 2024-05-31 18:39:49 发布

阅读量1k

点赞数 2

本文链接：https://blog.csdn.net/huhaiqing106/article/details/110150589

版权

1.前言前段时间突发一个想法，想尝试从零开始搭建一个React项目模板，发布到GitHub，再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块，然后再用这个模板结合之前的一套组件库，完成编译打包运行一些列操作，再就是另外一个大事，用基于这个项目模板与组件库构建的项目，搭建自动化构建与自动化部署整个流程，将连载文章记录整个这个流程，以便后期回溯。2.初始化项目新建项目文件然后执行命令，-y 需要选择的地方默认是yes，执行完后会生成个package.json文件npm init -y3.初始

摘要由CSDN通过智能技术生成

1.前言

前段时间突发一个想法，想尝试从零开始搭建一个React项目模板，发布到GitHub，再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块，然后再用这个模板结合之前的一套组件库，完成编译打包运行一些列操作，再就是另外一个大事，用基于这个项目模板与组件库构建的项目，搭建自动化构建与自动化部署整个流程，将连载文章记录整个这个流程，以便后期回溯。

2.初始化项目

新建项目文件然后执行命令，-y 需要选择的地方默认是yes，执行完后会生成个package.json文件

npm init -y

3.初始化typeScript配置

执行完命令后会生成tsconfig.json文件，文件中会有全属性的配置与描述，在结合自己的需求配置使用，因tsconfig.json篇幅太长只留了我的一些配置项

yarn add typescript -g
tsc init

{
   
  "compilerOptions": {
   
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "ES2016",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of 
    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

4.配置react

4.1.安装依赖

yarn add react react-dom react-router-dom
yarn add @types/react @types/react-dom @types/react-router-dom --dev

4.2.新建html模板

新建public目录下新建index.html

<!--public/index.html-->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <link rel="icon"

最低0.47元/天解锁文章

一个爱编码的程序猿

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端项目搭建部署全流程（一）：搭建React项目

1.前言前段时间突发一个想法，想尝试从零开始搭建一个React项目模板，发布到GitHub，再编写脚手架命令拉取模板以及编写脚本命令快速生成业务模块，然后再用这个模板结合之前的一套组件库，完成编译打包运行一些列操作，再就是另外一个大事，用基于这个项目模板与组件库构建的项目，搭建自动化构建与自动化部署整个流程，将连载文章记录整个这个流程，以便后期回溯。2.初始化项目新建项目文件然后执行命令，-y 需要选择的地方默认是yes，执行完后会生成个package.json文件npm init -y3.初始
复制链接

扫一扫