%20(2).svg)
项目简介
本项目是基于Webpack4、Babel7和TypeScript的React开发环境搭建项目。借助Webpack自动化构建项目，利用Babel解析React和TypeScript代码以保障在各浏览器的兼容性。项目涵盖Less样式处理、ESLint代码规范检查、Prettier代码格式化等功能，为开发者打造高效、规范的React开发环境。
项目的主要特性和功能
- Webpack打包配置：支持开发和生产模式，有自动热重载功能。
- React和TypeScript支持：可解析React和TypeScript代码，支持class组件中的箭头函数。
- Less样式处理：支持Less样式文件，通过PostCSS优化浏览器兼容性。
- 代码规范检查：用ESLint检查代码规范，结合Prettier格式化代码，统一项目代码风格。
- Jest测试：配置Jest进行单元测试，保证代码质量。
- Webpack优化：通过
splitChunks优化打包性能，支持按需加载和代码分割。
安装使用步骤
1. 初始化项目并安装依赖
shell
npm init -y
npm install --save-dev webpack webpack-cli
2. 搭建项目目录结构
text
|-- webpack-cli
|-- config # webpack配置文件目录
|-- dist # webpack打包文件地址
|-- package.json
|-- src # 源代码文件夹
|-- index.js
|-- index.html
3. 配置Webpack
在config文件夹下创建index.js文件，进行基础配置：
javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'main.js'
}
};
在package.json中添加打包命令：
json
"scripts": {
"build": "webpack --config config/index.js"
}
4. 支持React和TypeScript
安装相关依赖：
shell
npm install react react-dom react-router-dom
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader
在项目根目录下创建.babelrc文件，配置Babel预设：
javascript
module.exports = {
presets: [
'@babel/preset-react',
'@babel/preset-typescript'
]
};
在Webpack配置中增加对Babel的loader支持：
javascript
module: {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
5. 处理静态资源和Less文件
安装相关依赖：
shell
npm install url-loader file-loader style-loader css-loader postcss-loader autoprefixer less less-loader --save-dev
配置Webpack处理图片等静态资源：
javascript
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
配置Webpack处理Less文件，并处理CSS兼容性：
javascript
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
]
}
6. 添加代码规范和测试配置
安装ESLint和Prettier相关依赖：
shell
npm install eslint eslint-config-airbnb eslint-plugin-prettier eslint-config-prettier prettier --save-dev
创建ESLint配置文件并配置：
javascript
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'airbnb',
'plugin:prettier/recommended'
],
rules: {
// 自定义规则
}
};
安装Jest并基本配置：
shell
npm install jest babel-jest @types/jest --save-dev
在项目根目录下创建jest.config.js文件：
javascript
module.exports = {
collectCoverage: false,
rootDir: path.join(__dirname, 'src'),
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1'
},
collectCoverageFrom: ['**/*.{js,ts,tsx}', '!**/node_modules/**', '!**/vendor/**']
};
7. 优化Webpack打包配置（可选）
按项目优化建议配置，如使用splitChunks代码分割：
javascript
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
maxAsyncRequests: 5,
maxInitialRequests: 4,
automaticNameDelimiter: '~',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】