重学前端 - react-第二节: 添加ts + scss
重学前端 - react: 添加ts + scss
- 简介: 上一节我们新建了 react 项目。项目中并没有使用 ts + scss. 现在我们为项目添加 ts + scss。是项目后期维护更加方便,也为他团队提供书写规范。
安装 typescript 相关 module
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
推荐:https://create-react-app.dev/docs/adding-typescript/
https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
添加 tsconfig.json
在项目根目录下添加 tsconfig.json 文件, 文件内容如下:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
修改改 index.js App.js 文件为 index.tsx App.tsx
重新启动项目
添加 scss 支持
npm install sass-loader node-sass --save-dev