苦海学说

Personal Blog
Exchange Learning

搭建react项目(一):目录结构及基础配置

根据项目需求,需要使用到react框架来开发新的项目,初次使用react搭建项目,没有选用create-react-app直接生成的目录结构,但是我觉得定制化不够,网上查询了不少项目构建的方式,没有找到满意的结果,于是乎决定从react-script内部结构及配置中筛选出项目中能用上的部分,然后再根据当前项目需求修改部分配置。

开始搭建项目:
安装:
1、全局安装typescript:

npm install -g typescript

2、新建项目文件夹并进入:

mkdir react-demo && cd react-demo

3、初始化,生成package.json、tsconfig.json和.eslintrc.json:(ps.当前使用的是eslint)

npm init -y && tsc --init
npx eslint --init

4、安装开发工具webpack, webpack-cli, webpack-dev-server:(ps.注意版本问题,如果不兼容就安装react-script指定版本)

npm install -D webpack@4.44.2 webpack-cli@3.3.0 webpack-dev-server

5、安装react相关:

npm install -S react react-dom
npm install -D @types/react @types/react-dom

项目结构及基础配置:
1、新建src、public、config、environment文件夹:

mkdir src public config environment

1.1、进入public文件夹新建index.html及放入favicon.ico:
1603461891(1).png
1.2、进入config文件夹新建webpack.config.js、paths.js、env.js、devServer.js、plugins.js;
1.3、进入environment文件夹新建.env.development、.env.production、.env.test:
1.4、进入src文件夹新建index.tsx、assets、component、route、service、tools、view:
1603462353(1).png

2、配置tsconfig.json、.eslintrc.json及编辑package.json:
2.1、配置tsconfig.json:

{
  "compilerOptions": {
  /*基本选项*/
  "target": "es5" /* 指定ECMAScript目标版本:``ES3''(默认),``ES5'',``ES2015'',``ES2016'', 
   ``ES2017'',``ES2018'',``ES2019'',``ES2020''或``ESNEXT''。 */,
  "module": "ESNext" /* 指定模块代码生成:“ none”,“ commonjs”,“ amd”,“ system”,“ umd”,“ es2015”,“ 
  es2020”或“ ESNext”。 */,
  "lib": ["dom", "dom.iterable", "esnext"] /* 指定要包含在编译中的库文件。 */,
  "allowJs": true /* 允许编译javascript文件。 */,
  "jsx": "react" /* 指定JSX代码生成:“ preserve”,“ react-native”或“ react”。 */,
  "noEmit": true /* 不要发射输出。 */,
  "isolatedModules": true /* 将每个文件作为单独的模块进行翻译(类似于“ ts.transpileModule”)。 */,

   /* 严格的类型检查选项 */
  "strict": true /* 启用所有严格的类型检查选项。 */,

   /* 模块分辨率选项 */
   "moduleResolution": "node" /* 指定模块解析策略:“节点”(Node.js)或“经典”(TypeScript 1.6之前的版本)。 
   */,
  "allowSyntheticDefaultImports": true /* 允许从模块进行默认导入而没有默认导出。 这不影响代码发出,仅影响类 
   型检查。 */,
  "resolveJsonModule": true /* 是否允许把json文件当做模块进行解析 */,
  "esModuleInterop": true /* 通过为所有导入创建名称空间对象,启用CommonJS和ES模块之间的发射互操作性。 暗示“ 
   allowSyntheticDefaultImports”。 */,

  /*高级选项*/
  "skipLibCheck": true /* 跳过声明文件的类型检查。 */,
  "forceConsistentCasingInFileNames": true /* 禁止对同一文件使用大小写不一致的引用。 */
 }
}

2.2、配置.eslintrc.json

{
"env": {
    "browser": true,
    "es2021": true
},
"extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
    // 自定义的规则
    "linebreak-style": [0, "error", "windows"],
    "react/jsx-filename-extension": 0,
    "indent": ["error", 2], // error类型,缩进4个空格
    "space-before-function-paren": 0, // 在函数左括号的前面是否有空格
    "eol-last": 0, // 不检测新文件末尾是否有空行
    "semi": ["error", "always"], // 必须在语句后面加分号
    "quotes": ["error", "single"], // 字符串没有使用单引号
    "no-console": ["error", { "allow": ["log", "warn"] }], // 允许使用console.log()
    "arrow-parens": 0,
    "no-new": 0, //允许使用 new 关键字
    "no-duplicate-imports": "off"
 }
}

2.3、编辑package.json、.env.development、.env.production、.env.test:

package.json:
 "scripts": {
  "dev": "set ENV_PATH=development&& webpack-dev-server --config config/webpack.config.js --open",
  "build": "set ENV_PATH=production&& webpack --config config/webpack.config.js --profile",
  "test": "set ENV_PATH=test&& webpack --config config/webpack.config.js --profile"
 },
 "browserslist": {
 "production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
  ],
  "development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
  ]
 },

.env.development:
  NODE_ENV=development

.env.production:
  NODE_ENV=production

.env.test:
  NODE_ENV=production
本原创文章未经允许不得转载 | 当前页面:苦海学说 » 搭建react项目(一):目录结构及基础配置

评论