Loading... > ps：很久没写博客，最近学了一些前端，觉得还是需要沉淀一些东西，于是便有了从零开始构建react开发环境的这篇文章 ## 开始 ### 初始化项目 新建一个my-app文件夹 ```bash mkdir my-app ``` 进入my-app文件夹 ```bash cd my-app ``` 然后在my-app目录下创建src文件夹用来存放React代码 ```bash mkdir src ``` 使用npm初始化项目 ```bash npm init -y ``` 此时的项目架构如下： ![截屏2022-02-03 下午3.51.20.png][1] ### 安装typescript和react #### 安装typescript 全局安装是为了使用tsc命令，开发安装是必须的 ```bash npm install -g typescript # 全局安装 npm install typescript --save-dev ``` <div class="tip inlineBlock info"> 注意：在这里简单介绍一下`npm install`命令的参数 `--save-dev` 和 `--save`的区别，一般来说使用`--save-dev`参数安装的npm包在最终打包的时候不会被包括到源码里去，所以类似babel和webpack这种进行项目工程构建或者代码编译的库应该用`--save-dev`来安装，而`--save`则是安装代码运行必须的库，比如react等。 </div> #### 配置typescript 安装好之后输入 ```bash tsc --init ``` 打开 tsconfig.json，进行以下配置。这将告诉 TypeScript 在哪找到我们的代码。 ```json { "compilerOptions": { "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "lib": ["es5", "es6", "dom"], /* Specify library files to be included in the compilation. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ "sourceMap": true, /* Generates corresponding '.map' file. */ "outDir": "./dist/", /* Redirect output structure to the directory. */ "removeComments": true, /* Do not emit comments to output. */ "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ "preserveConstEnums": true }, "include": [ "./src/**/*" ] } ``` #### 安装react和react的typescript支持 ```bash npm install react react-dom --save && npm install @types/react --save-dev && npm install @types/react-dom --save-dev ``` --- ### 安装webpack 在终端输入以下指令 ```bash npm install webpack --save-dev && npm install webpack-cli --save-dev && npm install webpack-dev-server --save-dev && npm install ts-loader --save-dev && npm install html-webpack-plugin --save-dev ``` 现在，除了 Webpack ，我们还安装了另外4个开发依赖。 - webpack-cli - 在终端提供有用的 Webpack 命令。 - webpack-dev-server - 为我们的应用提供服务端的支持，如果我们修改代码，可以帮我们刷新浏览器的页面（热更新）。 - ts-loader - 读取tsconfig.json的配置，帮助webpack编译typescript代码 - html-webpack-plugin - 简化HTML文件的创建，为 Webpack 提供打包服务。 #### webpack的配置 在根目录my-app建立webpack.config.js文件，然后写入以下配置 ```javascript const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); module.exports = { entry: { app: ["./src/main.tsx"], vendor: ["react", "react-dom"], }, output: { filename: "js/[name].bundle.js", path: path.resolve(__dirname, "dist"), }, devtool: "source-map", resolve: { extensions: [".ts", ".tsx", ".js", "jsx", ".json"], }, module: { rules: [ { test: /\.tsx?$/, exclude: /node_modules/, use: { loader: "ts-loader", }, }, ], }, plugins: [ new HtmlWebpackPlugin({ title: "react app", filename: "index.html", template: "./src/index.html", }), ], }; ``` - 在entry中，vendor 告诉 webpack 我们的依赖包含了 react 和 react-dom - output 告诉 webpack 在哪里打包我们的应用程序，当前的例子是在 dist 文件夹里面。 - 在 module 下我们添加了ts-loader - 在 plugins 下，我们使用 HtmlWebPackPlugin 添加了 index.html 源文件。压缩后的 html 文件将放在我们的 dist 文件夹中，同时引用我们打包后的js文件。 接下来，新创建一个 index.html 文件并将其添加到我们的src文件夹中。并确保<div id="app"></div>已被添加在 index.html 文件中。这是我们的React应用程序将要渲染的位置。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>React</title> </head> <body> <div id="app"></div> </body> </html> ``` ### 配置开发调试命令 将package.json中的script修改成以下配置 ```json { "scripts": { "dev": "webpack-dev-server --open --mode development" } } ``` 以下是配置完成后的package.json，仅供参考 ```json { "name": "my-app", "version": "1.0.0", "description": "", "main": "main.tsx", "scripts": { "dev": "webpack-dev-server --open --mode development" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", "html-webpack-plugin": "^5.5.0", "ts-loader": "^9.2.6", "webpack": "^5.68.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" }, "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" } } ``` ### 完成 新建main.tsx和App.tsx `src/main.tsx` ```tsx import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("app")); ``` `src/App.tsx` ```tsx import React from "react"; function App() { return ( <div> <h1>Hello World!</h1> </div> ); } export default App; ``` 运行以下命令，开发环境构建成功！ ```bash npm run dev ``` ![截屏2022-02-03 下午5.02.01.png][2] 最终项目文件结构 ![截屏2022-02-03 下午5.16.42.png][3] **参考文章** [使用 React，TypeScript 和 Webpack 开始一个项目][4] [如何从零开始创建React项目（三种方式）][5] [ts-loader github][6] [1]: /usr/uploads/2022/02/3277970384.png [2]: /usr/uploads/2022/02/1318706798.png [3]: /usr/uploads/2022/02/1771641753.png [4]: https://segmentfault.com/a/1190000019489612 [5]: https://juejin.cn/post/6844903953524588552 [6]: https://github.com/TypeStrong/ts-loader Last modification：July 2, 2025 © Reprint prohibited Support Appreciate the author AliPayWeChat Like 如果觉得我的文章对你有用，请随意赞赏
