1.开发环境 react18+webpack4
2.电脑系统 windows11专业版
3.随着工作经验的积累,我们会发现官方脚手架创建出来的项目有很多都是没有用的,那我们怎么自己从0开始创建项目呢？下来我来分享一下我的方法,希望对你有所帮助。
4.在这里我选择的是react,那么首先我们需要先简单的来了解一下react。
开发React必须依赖三个库：
react：包含react所必须的核心代码
react-dom：react渲染在不同平台所需要的核心代码
babel：将jsx转换成React代码的工具4-1. react 依赖核心:
react : react 包中包含了react和react-native所共有的核心代码。react-dom:
react-dom针对web和native所完成的事情不同：
web端：react-dom会讲jsx最终渲染成真实的DOM，显示在浏览器中
native端：react-dom会讲jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。babel:
比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。
那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。5.初始化项目:
npm init -y6.首先是安装:
// react 安装
npm i react react-dom -S
or npm i react@18 react-dom@18 -S// babel依赖安装,具体可以看babel 官网
npm i @babel/preset-env @babel/preset-react @babel/core babel-loader@8 -D// webpack 安装
npm webpack@4 webpack-cli@4 webpack-dev-server html-webpack-plugin@4 -D7.创建src目录,在src目录创建index.js和index.html
// index.js
import React from 'react';
// 注意这里ReactDOM是从client引入
import ReactDOM from 'react-dom/client';
function App () {
return (<div>Hello,Chen</div>)
}
ReactDOM.createRoot(document.getElementById('app')).render(<App />);// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chen-react-admin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>8.创建webpack.config.js(和package.json同级)
const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output: {
filename: 'index.js',//出口文件名
path: path.resolve(__dirname, 'dist'),//出口路径
},
mode: 'development',//模式
module:{
rules:[
{
test:/\.(js|jsx)$/,
use:{
loader:'babel-loader'
}
}
]
},
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html'
})
]
}9.创建babel.config.js(和package.json同级)
module.exports = {
"presets": [
"@babel/preset-env", "@babel/preset-react"
],
}10.添加package.json配置:
"scripts": {
"start": "webpack-dev-server --config webpack.config.js"
},11.终端执行 npm start
//项目已经启动成功了,项目只是进行简单的配置,后期会不断完善12.扩展
// 可能出现的报错
更新到node18之后,运行之前的项目报错;上网查了一下,说是因为 node17版本
中最近发布的OpenSSL3.0,而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,
可能会对生态系统造成一些影响// 解决方法 1.降低node版本 2.修改package.json配置
"scripts": {
"start": "SET NODE_OPTIONS=--openssl-legacy-provider && webpack-dev-server --config webpack.config.js"
},13.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。