This site runs best with JavaScript enabled.

👌 简单 6 步从零开始配置 ts 和 react 环境


[原创]  最后编辑于：2020-03-25 13:50:19@code#功能#思考#最佳实践#babel#Webpack#ES6#TypeScript

!本篇文章过于久远，其中观点和内容可能已经不准确，请见谅!~

想分享的是让你知道一个项目的初始化并不是必须要各种脚手架，只要你知道要什么和其中的配合，就很容易初始化需要的项目。

1、背景

前端工程化肯定会考虑的就是项目的初始化，或者很多的启动模板能节省很多的时间，不用纠结很多配置。
项目对功能的需求当然是不同的，大公司多人协作的话，工程化是必须的，毕竟有人能够维护，但是对于个人的话没有那么多的维护，工程化并没有那么好的收益（我个人建议能工程化的地方尽量抽象出来，效率还是有很大提升的，不仅仅是项目初始化的问题）。自己的小项目可能很多时候需要手动配置，长时间不用这些技术就生疏了，这里渐进的实现一个现在经典的开发环境 React + TypeScript + ESlint。

2、最开始的地方

下面的安装可能会有外网涉及，可以用 npm-config-china 或者 垫脚上网 功能。

2.1 在代码托管平台上创建项目

使用版本管理来管理每个项目是最基本的要求，不仅仅是保存代码，其中涉及到 workflow（GitFlow、GitHub flow）、CI/CD(持续开发、自动化测试、持续集成、持续部署)、版本控制(里程碑、代码评审)等。
得到一个 Git 项目地址

2.2 本地初始化

将代码 clone 拉到本地，然后用最爱的编辑器打开项目目录，终端中运行 npm 初始化：
# 使用 npm 相关生态的前提
yarn init
# 得到 package.json
然后添加 .gitignore 忽略前端常见的本地文件和目录（开发中不需要进行版本管理、或者多端同步的文件），刚开始只需要几个必须的，开发的过程中每次检查提交就会知道哪些文件需要被忽略：
/node_modules
yarn-error.log
logs
*.log
build
.DS_Store

2.3 webpack 技术栈

一般项目使用 webpack 打包项目，加上基本上大部分都需要开发和热更新功能，也需要 webpack-dev-server：
yarn add -D webpack webpack-cli webpack-dev-server
直接使用默认设置能够运行，但是一般可以配置下入口和输出，后续也需要这个配置文件：
var path = require("path");
module.exports = {
  entry: path.resolve(__dirname, "../src/index.tsx"),
  output: {
    path: path.resolve(__dirname, "../build"),
    filename: "bundle.js"
  },
};
此时可以写 js 文件了，能够转译为兼容版本的代码，一个很简单的多模块打包系统，但是还是远远不够。
因为，想要写高级语法而不是兼容的梦魇，需要 babel-loader;想要加入 less/scss 的编译，需要 less-loader；想要直接引入 svg、css、md 文件等还需要各个 loader；

2.4 Babel

高级语法转换支持，避免花费时间在语法兼容这些小事上。之前有详细介绍: 💡 Babel 再理解和最佳实践。
# babel 最佳实践全家桶
yarn add -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs3
# 让 webpack 能够使用 babel
yarn add -D babel-loader
然后在 webpack build 配置文件中指定加载器：
// webpack.config.js
 module.exports = {
   entry: ...,
   output: ...,
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: 'babel-loader'
+      }
+    ]
+  },
 };
然后配置 babel.config.json 文件:
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": ">5%", // 指定目标浏览器范围
        "useBuiltIns": false, // 禁用 env 的 polyfill
      }
    ],
  ],
  "plugins": [
    [
      // 为了将 babel 的辅助函数复用的
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3, // 支持例如 [].includes 的实例方法的 polyfill
        "useESModules": true
      }
    ]
  ]
}
这样就能完美支持 babel 的根据目标浏览器环境编译了，加上 useBuiltIns: usage 可以自动添加垫片 polyfill，@babel/plugin-transform-runtime 和 @babel/runtime-corejs3 用来提取固定的辅助函数和垫片 polyfill。

2.5 TypeScript

babel 能够接入 typescript 的编译，所以不用 webpack 单独 loader 处理 ts 文件了
# babel 拓展 typescript 功能
yarn add -D @babel/preset-typescript typescript
创建 tsconfig.json 加上一些配置
// tsconfig.json
{
  "compilerOptions": {
    "module": "es6", // 代码使用的模块方案
    "target": "es5", // 目标转移成为的代码
    "jsx": "react", // jsx 语法怎么编译
    "noImplicitAny": true, // 允许一些隐含的 any
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入
  }
}
然后配置 babel.config.json 文件:
// babel.config.json
 {
   "presets": [
     [
       "@babel/env",
       {...}
     ],
+    "@babel/preset-typescript"
   ],
   "plugins": [...]
 }
webpack 中不需要再添加 ts-loader，只需要添加拓展了：
module.exports = {
   entry: ...,
   output: {...},
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(tj)sx?$/,
         exclude: /(node_modules|bower_components)/,
         use: 'babel-loader'
       }
     ]
   },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js']
+  },
 };
这样就可以在自己的代码中添加 ts 文件了

2.6 React

# babel 拓展 react 功能
yarn add -D @babel/preset-react
yarn add react react-dom @types/react @types/react-dom
然后配置 babel.config.json 文件:
// babel.config.json
 {
   "presets": [
     [
       "@babel/env",
       {...}
     ],
+    "@babel/preset-react",
     "@babel/preset-typescript"
   ],
   "plugins": [...]
 }

2.7 SCSS

样式文件也是不能少
# 安装 loader 和解析器，加上 style 和 css 可以链式加载
yarn add -D sass-loader style-loader css-loader node-sass
module.exports = {
   entry: ...,
   output: {...},
   module: {
     rules: [
       {...},
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader", // 将 JS 字符串生成为 style 节点
+          "css-loader", // 将 CSS 转化成 CommonJS 模块
+          "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
+        ]
+      },
     ]
   },
 };

2.8 ESLint

现在的开发，ESLint 对于高质量的代码时必不可少的，虽然很多可以通过编辑器来实现，但是可持续的
yarn add -D eslint
eslint 的配置更加简单：
eslint --init
按照提示选择配置即可，最后会自动生成配置文件，然后安装依赖：
// .eslintrc.js
module.exports = {
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
  }
};

3、 最后的文件

最后再添加自己习惯的命令：
// package.json
{
  "scripts": {
    "lint": "npx eslint --ext .jsx,.js,.ts,.tsx ./src/",
    "build": "webpack --config=./build/webpack.config.js",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build --config=./build/webpack.config.js"
  },
}
// babel.config.json
{
  "presets": [
    [
      "@babel/env",
      {
        "targets": ">5%",
        "useBuiltIns": false
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "useESModules": true
      }
    ]
  ]
}
// build/webpack.config.js
var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: path.resolve(__dirname, "../src/index.tsx"),
  output: {
    path: path.resolve(__dirname, "../build"),
    filename: "bundle.js"
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/template/index.ejs" })],
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /(node_modules|bower_components)/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
};
// tsconfig.json
{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true,
  }
}
// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};
yarn dev
打完收工！难吗？不难！不难吗？太南了！

感谢您的阅读，本文由 Ubug 版权所有。如若转载，请注明出处：Ubug（https://ubug.io/blog/start-from-empty-to-ts-react）

🔝
🎈 分享·🧧 打赏
🚧 本文结束

🔥 推荐阅读

Ubug
Ubug 一个开发工程师，现居北京，全栈偏前端开发，工作目标是用高质量的技术和代码改变世界。兴趣广泛、想法多、喜欢折腾。

🐞 关于

有时间就会分享一些技术文章、专业内容、经典问题、系列功能等。

｛⛔ 未标注内容均为原创，请勿转载 ©️｝
Ubug