React脚手架集成Typescript

最近一直想搭建个集成React，TypeScript的开发环境，但是无从下手，一番摸索后总算折腾出来了，记录下步骤。

React有create-react-app，这种脚手架的方式好处很明显，支持ES6新增语法、api，每次保存自动更新改变的内容（不用再每次手动关闭重启Node服务器），所以弄出脚手架：

$ npx create-react-app react_typescript $ cd react_typescript

有了脚手架，然后需要集成typescript，查阅官方文档从Javascript迁移到Typescript，步骤如下：

安装Typescript：

$ npm install typescript

根目录下创建配置文件tsconfig.json,写入以下内容：

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve" }, "include": [ "src" ] }

现在需要将Typescript集成到React脚手架的构建工具（默认webpack），也就是说ts零件已经制造完成，需要安装到脚手架机器上，这一步比较坑，因为脚手架已经集成了webpack，如果我们还本地安装webpack，执行npm start会报错，解决方案：

因为脚手架会自动搜索根目录下的webpack配置文件webpack.config.js，并将其配置合并到总配置中，所以我们需要在根目录下创建webpack.config.js，写入配置如下：

module.exports = { entry: "./src/index.ts", output: { filename: "./dist/bundle.js", }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { loaders: [ // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. { test: /\.tsx?$/, loader: "awesome-typescript-loader" } ], preLoaders: [ // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. { test: /\.js$/, loader: "source-map-loader" } ] }, // Other options... };

然后安装source-map-loader，awesome-typescript-loader:

$ npm install awesome-typescript-loader source-map-loader

集成了React，Typescript的脚手架到此就搭建成功了，修改App.js为App.tsx，出现很多语法错误，是因为Typescript没有找到react，react-dom等依赖的类型声明，安装对应的类型声明模块：

模块名的格式为: @types/module-name，例如

$ npm install @types/react

安装完各种声明模块之后，npm start运行，http://localhost:3000出现界面：

挖坑成功！        构建成功！

我的依赖版本如下：

"dependencies": { "@types/jest": "24.0.12", "@types/node": "11.13.8", "@types/react": "^16.9.11", "@types/react-dom": "16.8.4", "@types/react-router-dom": "^5.1.0", "awesome-typescript-loader": "^5.2.1", "react": "^16.11.0", "react-dom": "^16.11.0", "react-router-dom": "^5.1.2", "react-scripts": "3.2.0", "source-map-loader": "^0.2.4", "typescript": "^3.6.4" }

附加信息：

React脚手架有npm eject命令，可以弹出webpack的配置文件，但是此操作不可逆。