前言
自从接触前端开发以来，严格来说是从接触 React 开发以来，一直用的 create-react-app 脚手架。用起来确实爽，啥也不用干，直接上业务代码（这其实也就是脚手架的意义所在）。
随着技术的进阶，是时候抛开脚手架工具自建一个 React 应用开发环境了。
该环境支持的技术场景：
1. 支持 React
2. 支持 typescript
3. 支持 scss
4. 支持 调试热更新
正文
一、创建项目目录
npm init git init
二、安装依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader npm install html-webpack-plugin clean-webpack-plugin --save-dev npm install react react-dom --save npm install ts-loader typescript core-js --save npm install --save-dev @babel/preset-typescript npm install --save-dev @babel/preset-react npm install @types/react-dom @types/react --save-dev npm install --save-dev sass-loader npm install node-sass --save-dev
三、目录结构
project_name public index.html src component app app.scss app.tsx index.tsx babel.config.json package.json package-lock.json tsconfig.ts webpack.config.js
四、index.html 文件内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>React Starter</title> </head> <body> <div id="root"></div> <noscript> You need to enable JavaScript to run this app. </noscript> </body> </html>
五、app.scss 文件内容
body{ color: red; div{ color: greenyellow; } }
六、app.tsx 文件内容
import React,{FC,useState} from 'react' import './app.scss' interface AppProps { } export const App: FC<AppProps> =(props)=>{ const [data, setData] = useState(null) return <article className={'app'}> hello react </article> } App.defaultProps = {} export {App as default} from './app'
七、index.tsx 文件内容
import React from 'react' import ReactDOM from 'react-dom' import App from "./component/app/app" ReactDOM.render(<App/>, document.getElementById('root'))
八、babel.config.json 文件内容
{ "presets": ["@babel/preset-env","@babel/preset-react"] }
九、package.json 文件内容
{ "name": "project_name", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack server" }, "author": "", "license": "ISC", "devDependencies": { "@babel/cli": "^7.16.0", "@babel/core": "^7.16.0", "@babel/preset-env": "^7.16.4", "@babel/preset-react": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@types/react": "^17.0.36", "@types/react-dom": "^17.0.11", "babel-loader": "^8.2.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.5.1", "html-webpack-plugin": "^5.5.0", "node-sass": "^6.0.1", "sass-loader": "^12.3.0", "style-loader": "^3.3.1", "webpack": "^5.64.2", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.5.0" }, "dependencies": { "core-js": "^3.19.1", "react": "^17.0.2", "react-dom": "^17.0.2", "ts-loader": "^9.2.6", "typescript": "^4.5.2" } }
十、package-lock.json 文件内容（随 npm 自动生成的，无需关注）
十一、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": false, "noEmit": false, "jsx": "react" }, "include": [ "src" ] }
十二、webpack.config.js 文件内容
const path = require("path") const webpack = require("webpack") const HtmlWebpackPlugin = require('html-webpack-plugin') const {CleanWebpackPlugin} = require('clean-webpack-plugin') module.exports = { entry: path.resolve(__dirname, "src/index.tsx"), mode: "development", module: { rules: [ { test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use:[ { loader: "babel-loader", options: { presets: [ [ "@babel/preset-env", // 配置信息 { targets: { "chrome": "58", "ie": "11", }, // 指定 corejs 的版本 "corejs": "3", // 使用 corejs 的方式 "usage" 表示按需加载 "useBuiltIns": "usage" } ], [ "@babel/preset-typescript", ], [ "@babel/preset-react", { } ] ] } }, { loader:"ts-loader" } ], }, { test: /\.(css|scss)$/, use: [ { loader:"style-loader", }, { loader:"css-loader" }, { loader:"sass-loader" } ] }, { test: /\.(png|jpg|gif)$/, type: 'asset/resource', generator: { filename: 'static/[hash][ext][query]' } }, { test: /\.svg/, type: 'asset/inline' }, ] }, resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"], }, output: { path: path.resolve(__dirname, "build"), filename: "bundle.js" }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, 'public/index.html') }), new CleanWebpackPlugin({ path: path.join(__dirname, 'build') }) ] }
十三、完成
启动命令：
npm run-script dev
启动截图
浏览器截图
可以看到 tsx、scss 类型的文件都是支持的。
好了，接下来可以随便玩了，想怎么改怎么改，不需要再受看不懂 create-react-app 这种脚手架配置的气了。
