React使用TypeScript（一：基本环境+集成antd）

时间：2021-03-25 16:11:07

前言

上东家前端pc项目是15年的React+Flux，当然架子肯定是其他大牛搭建的。本司刚刚最近才有新版pc的需求（ps：之前只要个静态pc和mobile页面, 简单搭建webpack@3打包文件），所以需要重新搭建一个pc。想来想去，angularjs太重，没人用它做pc，不合适；vue，算了吧，文档都不知道长什么样子；jquery，用它估计也是想找死。最后技术定位到React+ React-Router+TypeScript+Redux的坑中，当然，如果你问我为什么不用Vue+Vuex，我只能默默告诉你，纯属团队和个人偏好，而且偏向是React。

create-react-app和webpack配置

React官方提供业界优秀的create-react-app的cli，当然你也可以选择自己写一份webpack文件（ps：简单版，你还是要reject cli 去参考别人的配置），但是本司是小公司，要考虑换人成本和交接，版本升级等原因，就直接走cli呢。

（一）安装cli

React官方文档

$ npm install -g create-react-app yarn

安装全局cli加上yarn。如果你还不知道yarn，建议参考下面文档。

为什么我们要用yarn？

（二）初始化项目

$ create-react-app my-app --scripts-version=react-scripts-ts

react-scripts-ts是一些调整的组合，使得你可以使用标准create-react-app项目流程并且加入TypeScript。

现在你的项目应该是下面这个样子：

my-app/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
└─ tslint.json

其中：

  • tsconfig.json包含我们项目中的TypeScript的配置信息

  • tslint.json是我们的代码规范工具TSLint相关的配置

  • package.json包含我们的依赖项，以及一些用于测试、预览、部署等的快捷命令。

  • public包含静态资源，比如我们要部署的HTML页面和图片。你们可以删除除了index.html以外的任何文件。

  • src包含了我们TypeScript和CSS的代码。index.tsx是我们的文件的入口。

在package.json 中scripts中 分别有

  • start 开发命令 执行 npm run start
  • build 部署命令 执行 npm run build
  • test 测试命令允许Jest

（三）集成antd（不需要UI库可以跳过这里）

antd官方文档

3.1 引入antd

$ yarn add antd

3.2 增加按需加载antd组件

  • （1）增加react-app-rewired

这里需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）。

$ yarn add react-app-rewired --dev

修改package.json文件启动命令

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+ "start": "react-app-rewired start --scripts-version react-scripts-ts",
- "build": "react-scripts build",
+ "build": "react-app-rewired build --scripts-version react-scripts-ts",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
return config;
};
  • （2）增加ts-import-plugin

ts-import-plugin 是一个用于按需加载组件代码和样式的 TypeScript 插件

$ yarn add ts-import-plugin --dev
/* config-overrides.js */
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");

module.exports = function override(config, env) {
const tsLoader = getLoader(
    config.module.rules,
    rule =>
      rule.loader &&
typeof rule.loader === 'string' &&
      rule.loader.includes('ts-loader')
  );

  tsLoader.options = {
getCustomTransformers: () => ({
before: [ tsImportPluginFactory({
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
      }) ]
    })
  };

return config;
}

3.3 测试

在App.tsx增加antd组件，代码如下

import * as React from 'react';
import { Button } from 'antd'; /** 导入antd **/
import './App.css';

class App extends React.Component {
  render() {
return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的警告信息

3.4 测试

按照 配置主题 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 react-app-rewire 的 less 插件 react-app-rewire-less 来帮助加载 less 样式，同时修改 config-overrides.js 文件。

$ yarn add react-app-rewire-less --dev
/* config-overrides.js */
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");
+ const rewireLess = require('react-app-rewire-less');

module.exports = function override(config) {
const tsLoader = getLoader(
      config.module.rules,
      rule =>
        rule.loader &&
typeof rule.loader === 'string' &&
        rule.loader.includes('ts-loader')
    );

    tsLoader.options = {
getCustomTransformers: () => ({
before: [ tsImportPluginFactory({
libraryName: 'antd',
libraryDirectory: 'es',
-         style: 'css',
+         style: true,
        }) ]
      })
    };

+   config = rewireLess.withLoaderOptions({
+     modifyVars: { "@primary-color": "#1DA57A" },
+   })(config, env);

return config;
  }

修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

标签：

相关文章