Open wisetc opened 5 years ago
为 create-react-app 创建的 react 项目添加对 typescript 的支持,已经运行 npm run eject 弹出项目的 webpack 配置和 babel 配置。
npm run eject
利用 babel-preset-typescript,实际该 babel preset 包含在 babel-preset-react-app 中。
babel-preset-typescript
babel-preset-react-app
0x01. 更改 config/webpack.config.dev.js 和 config/webpack.config.prod.js 文件,增加对 ts 类型的支持。
config/webpack.config.dev.js
config/webpack.config.prod.js
配置项 extensions 中增加 '.ts' 和 '.tsx' 的模块。
extensions
{ //... extensions: ['.web.js', '.mjs', '.js', '.ts', '.json', '.web.jsx', '.jsx', '.tsx'], //... }
0x02. 配置项 module.rules 对 babel-loader 的匹配中,增加 ts 文件的匹配。
module.rules
babel-loader
{ // ... module: { rules: [ // ... { oneOf: [ // ... { test: /\.(js|ts|jsx|tsx|mjs)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), // ... }, ], }, ] } // ... }
更改 package.json 中 babel.presets 配置项。
package.json
babel.presets
原项目用到了 mobx 库,所以变更后的 babel.presets 配置为
{ "babel": { "presets": [ ["react-app", { "flow": false, "typescript": true }], "mobx" ], "_comment": "..." } }
babel-preset-react-app@9.0.0, babel-core@7.0.0-bridge.0 @babel/core@7.5.4
$ npm i -D babel-preset-react-app@9.0.0 babel-core@7.0.0-bridge.0 @babel/core@7.5.4
升级 babel-preset-mobx 的版本到 2.0.0,
babel-preset-mobx
2.0.0
$ npm i -D babel-preset-react-app@2.0.0
移除 dependencies 中的 babel 相关的依赖,相应更新后的 devDependencies 如
dependencies
devDependencies
"devDependencies": { "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.2", "babel-polyfill": "^6.26.0", "babel-runtime": "6.26.0", "@babel/core": "^7.5.4", "babel-core": "^7.0.0-bridge.0", "babel-plugin-import": "^1.8.0", "babel-preset-mobx": "^2.0.0", "babel-preset-react-app": "^9.0.0", "_comment": "..." }
咳咳,因为 babel-jest@20.0.3 依赖 babel-core@6,可能导致错误的 babel-core 版本加载,所以不太高兴的是,此时 babel 6 和 babel-preset-react-app@9.0.0 中的某些 babel 配置不兼容😒,也就是 test 不可用。
babel-jest@20.0.3
babel-core@6
babel-core
babel 6
babel-preset-react-app@9.0.0
$ npm i babel-jest@24.8.0
创建 tsconfig.json 文件
tsconfig.json
{ "compilerOptions": { "baseUrl": ".", "target": "es5", "paths": { "components/*": [ "./src/components/*" ], "src/*": [ "./src/*" ] }, "experimentalDecorators": true } }
创建一个 'test.ts' 文件并且引入 index.js 赶紧测试一下吧。
function add(a: number, b: number) { return a + b; } export const is666 = add(333, 333) === 666;
import { is666 } from './test'; console.log({ is666 });
如👇
情景
为 create-react-app 创建的 react 项目添加对 typescript 的支持,已经运行
npm run eject
弹出项目的 webpack 配置和 babel 配置。原理
利用
babel-preset-typescript
,实际该 babel preset 包含在babel-preset-react-app
中。更改配置和依赖
webpack
0x01. 更改
config/webpack.config.dev.js
和config/webpack.config.prod.js
文件,增加对 ts 类型的支持。配置项
extensions
中增加 '.ts' 和 '.tsx' 的模块。0x02. 配置项
module.rules
对babel-loader
的匹配中,增加 ts 文件的匹配。babel
更改
package.json
中babel.presets
配置项。原项目用到了 mobx 库,所以变更后的
babel.presets
配置为安装依赖
babel-preset-react-app@9.0.0, babel-core@7.0.0-bridge.0 @babel/core@7.5.4
升级
babel-preset-mobx
的版本到2.0.0
,移除
dependencies
中的 babel 相关的依赖,相应更新后的devDependencies
如咳咳,因为
babel-jest@20.0.3
依赖babel-core@6
,可能导致错误的babel-core
版本加载,所以不太高兴的是,此时babel 6
和babel-preset-react-app@9.0.0
中的某些 babel 配置不兼容😒,也就是 test 不可用。创建
tsconfig.json
文件测试
创建一个 'test.ts' 文件并且引入 index.js 赶紧测试一下吧。
如👇