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

前言

上东家前端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请看此处ES版本

（一）安装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，如果看到一个绿色的按钮就说明配置成功了。