文章目录
一、基础开发环境搭建
1. 新建项目目录
mkdir example #创建项目目录
cd example #进入项目目录
npm init -y #生成 package.jsom
2. 项目目录结构及内容
example # 项目目录
├── public # 静态公用目录
│ └── index.html # html模板
├── src # 源代码目录
│ ├── pages # 页面目录
│ │ └── home # 主页目录
│ │ └── index.js # 主页代码
│ └── index.js # React 入口代码
└── package.json
- public/index.html:html 模版”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- 移动端全屏 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" /> <meta name="theme-color" content="#000000" /> <!-- 防止页面缓存 --> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <!-- 页面标题 html-webpack-plugin 插件替换 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <!-- React根节点 --> <div id="root"></div> </body> </html>
- src/pages/home/index.js:首页
import React from 'react'; //引入 react function Home() { return (<div>Hello, World!</div>) } export default Home;
- src/index.js:React 的入口文件
'use strict'; import React from 'react'; //引入 react import { createRoot } from 'react-dom/client'; import Home from '../src/pages/home'; //引入本项目的首页 //把首页渲染到 html 模版的 react 根节点上 const domNode = document.getElementById('root'); const root = createRoot(domNode); root.render(<Home />);
3. 安装 React 18 + Babel 7 + Webpack 5
# 安装 React主程序 dom操作 路由
npm i -S react react-dom react-router-dom
# 安装babel
npm i -D @babel/core @babel/preset-env @babel/preset-react
# 安装 webpack主程序 支持命令行 本地开发用web服务 处理html插件
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
# 安装 babel加载器 css加载器 style加载器 将CSS提取到单独的文件中
npm i -D babel-loader css-loader style-loader mini-css-extract-plugin
4. 配置 Babel 和 Webpack
- 更新项目目录l
example # 项目目录 ├── public # 静态公用目录 │ └── index.html # html模板 ├── src # 源代码目录 │ ├── pages # 页面目录 │ │ └── home # 主页目录 │ │ └── index.js # 主页代码 │ └── index.js # React 入口代码 ├── .babelrc # babel配置文件 新增 ├── webpack # webpack配置目录 新增 │ └── dev.js # 开发环境配置文件 新增 └── package.json
- 新建文件 .babelrc
{ "plugins": ["@babel/syntax-dynamic-import"], "presets": [ [ "@babel/preset-env", { "modules": false } ], "@babel/preset-react" ] }
- 新建 webpack/dev.js:开发环境配置文件
// 引用库 const path = require('path'); const webpack = require('webpack'); // 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 路径方法 const resolve = pathname => path.resolve(__dirname, `../${pathname}`); const stylesHandler = MiniCssExtractPlugin.loader; module.exports = { mode: 'development', entry: resolve('src/index.js'), output: { clean: true, filename: 'js/[name].[hash:5].bundle.js', //出口文件 path: resolve('dist') //输出路径 }, devServer: { hot:true, // 热更新 open: true, // 编译结束后用浏览器打开 host: 'localhost', // 'local-ip', }, plugins: [ new HtmlWebpackPlugin({ title: 'HTML页面标题', //替换index.html的title标签内容 template: resolve('public/index.html'), //html模版的位置 }), new MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: 'css/[id].css', // filename: 'css/[name].[contenthash:5].css', // chunkFilename: 'css/[id].[contenthash:5]'.css', ignoreOrder: false }), ], module: { rules: [ { test: /\.(js|jsx)$/i, loader: 'babel-loader', }, { test: /\.css$/i, use: [stylesHandler, 'css-loader'], }, { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, type: 'asset', }, ], }, };
注意:loader 的加载顺序是从右往左,从下往上
5. 调试/构建项目
- 修改 package.jsom,在 “scripts” 下添加运行和构建命令
{ "scripts": { "dev": "webpack serve -c webpack/dev.js", "build:dev": "webpack -c webpack/dev.js" } }
- 用 npm 执行脚本命令
npm run dev # 调试项目 npm run build:dev # 构建项目
二、扩展项目支持的能力(待补充)
1. JS 扩展(待补充)
2. CSS 扩展(待补充)
3. 热更新(待补充)
4. 按需加载(待补充)
5. 第三方库的使用(待补充)
三、代码标准化(待补充)
1. 代码校验 ESLint(待补充)
四、代码发布(待补充)
1. 生产环境 webpack 配置(待补充)
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » Node 20 + React 18 + Babel 7 + Webpack 5 开发环境搭建
发表评论 取消回复