主要技术栈
构建工具:webpack v4.x
编译工具:babel v7.x
Js框架:Reactjs v16.8.x
UI库:antd v3.x
初始化工程
目录结构
react-project
/root
package.json ------------------------- 项目配置信息
webpack.config.js--------------------- 构建配置文件
.babelrc ----------------------------- js编译配置文件
index.html --------------------------- html
/src ------------------------------- 源代码
index.js ------------------------
// 初始化package.json
yarn init -y
依赖环境
// 安装react,react-dom
yarn add react react-dom antd
dependencies
- react
- react-dom
- antd
// 安装dev环境依赖
yarn add webpack webpakc-cli ... --dev
devDependencies
- webpack
- webpack-cli
- webpack-dev-server
- @babel/core
- @babel/preset-env
- @babel/preset-react
- babel-loader
在package.json
中新增scripts
字段,并写入start
指令以webpack-dev-server
启动工程,若不配置构建文件,默认以根目录下webpck.config.js
|| webpackfile.js
为启动配置。即webpack-dev-server
=== webpack-dev-server --config webpack.config.js || webpackfile.js
最终的package.json
文件
{
"name": "react-project"