create-react-app的TS支持以及css模块化

开始：

利用官方脚手架，搭建react工程。参考：https://react.docschina.org/docs/create-a-new-react-app.html。

过程：

1.暴露webpack配置 执行eject脚本，操作不可逆，在执行前要将之前内容提交到git，以便恢复。

执行 npm run eject 执行后产生webpack配置文件。

 

2.调整，使css文件可以模块化引入。

主要是利用css-loader模块。配置，获取其它插件请参考：https://webpack.docschina.org/loaders/css-loader/。

稍微调整一下原本的默认配置项。此处注意本文编辑时间，未来官方可能会调整，也许不能完全对应，但是本质不变。

 

然后就可以以单一模块的方式引入css文件了，通过hash保证唯一性：

app.css

.app{
    // css
}


js:
mport styles from './app.css';

styles[‘app’]; // 使用

3.添加TS支持。注意，官方提供创建TS版本。本例可以用来给现有工程改造。

npm/yarn/其它包管理 添加typescript @types/node @types/react @types/react-dom @types/jest；

typescript作为ts基础依赖包，其它作为常用的ts解释包。

安装完毕后，在根目录添加两类文件，以帮助编辑器做文本提示：

 

tsconfig.json 一些简单配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "importHelpers": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "sourceMap": true,
    "baseUrl": "./",
    "strict": true,
    "paths": {
      "@/*": ["src/*"],
    },
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "mock/**/*",
    "src/**/*",
    "config/**/*",
    ".umirc.ts",
    "typings.d.ts"
  ],
  "exclude": [
    "node_modules",
    "lib",
    "es",
    "dist",
    "typings",
  ]
}

 

d.ts 自定义的一些声明

declare module '*.css';
declare module '*.less';
declare module '*.png';

declare module 'uuid';
declare module '*.svg' {
  export function ReactComponent(
    props: React.SVGProps<SVGSVGElement>,
  ): React.ReactElement;
  const url: string;
  export default url;
}

之后可正常使用ts/tsx文件，编辑器提示也会同步。

 

 

 

结束：

本文暂时只做简单介绍，其中部分内容笔者也在学习，给自己挖个坑，以后继续细化。