从零搭建一个react-hooks项目（一）
发布时间
阅读量：
阅读量
从零搭建一个react-hooks项目（一）
- 近期计划基于React构建一个类似于Vue-admin的个人项目，并不依赖官方工具包。
- 首先建立一个基本的Webpack工程结构
- 建议从Webpack开始搭建一个基于React、Redux和TypeScript项目的框架
- 并实时跟踪和记录项目的各项配置细节
- 同时计划持续更新日志并整理技术文档
- 并且计划定期发布学习笔记与实践心得
- 首先建立一个基本的Webpack工程结构
webpack项目搭建
- 基础配置完成：确保电脑已安装node及npm工具
- 创建项目文件夹并命名为'react-admin'后进入
- 使用'npm init'命令启动初始化流程
- 按照指引一路确认生成完整的package.json文件
- 安装开发环境依赖项：依次安装webpack、webpack-cli、webpack-dev-server等核心组件
- 执行命令'npm i webpack webpack-cli webpack-dev-server -D'完成下载与配置
- 配置开发环境：在项目根目录中搭建webpack配置文件用于管理开发流程
- 创建并编辑root目录下的webpack.config.js文档以设置运行时参数
- 准备开发入口：构建项目主入口文件并完成基本功能框架搭建
- 在root目录下新建index.js作为程序启动入口
- 编写初始版本的入口代码框架，并进行基本功能测试与调试
function a(number){
console.log(number)
}
a(12)- 接下来我们来配置Webpack。
- 其入口和输出位置分别由entry和output属性指定。
- 如果我们使用的是单入口项目，则可以通过字符串指定入口路径（例如 './index.js'）。
- 如果项目采用模块化架构，则需通过对象指定入口路径（例如 { app: './index.js' }）。
- 在这种情况下，默认会以app.js命名并将其放入dist文件夹中（如果使用了字符串指定的入口路径）或者将键值对应的名称保存到目标文件夹中（如果使用了对象形式指定入口）。
- 为了实现这一点，请确保在构建时设置corrected选项为true以获取正确的模块名称信息。
- 最后，请记住所有输入都应该经过过滤处理以避免潜在的安全漏洞。
const path = require('path') // node环境自带，无需下载
// 单入口文件
module.exports = {
entry: './index.js', // 入口为index.js
output: { // 输出就是 dist/main.js
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
// 多入口文件
module.exports = {
entry: { // 入口也是index.js
app: './index.js'
},
output: { // 输出为dist/app.js
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}- 配置到这就算完成了最基本的配置，我们可以来测试一下，先在package.json中的 scripts 下新建指令 “start”: “webpack --config webpack.config.js”
- 然后再执行npm run start 就可以看到执行了打包过程，生成了dist文件夹
- 这里我们完成了基本的配置，但是这里还有一个问题，当我们修改entry对应的文件名时，重新执行打包，会发现之前的打包文件还存在，这样就会导致我们的dist文件夹会包含很多之前打包的跟当前代码无关的文件，这样其实对我们的项目并不友好，这里我们想要在每次打包的时候都把dist给移除了，并重新生成
- clean-webpack-plugin 插件可以帮助我们实现这个需求，先下载这个包 npm i clean-webpack-plugin -D
- 然后在webpack.config.js中进行配置，如下，plugins用于我们配置我们想要的相关插件，接收一个数组值，这样我们的项目就可以在每次打包前都将dist清空了，就不会存在无用文件在内了
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
plugins: [
new CleanWebpackPlugin()
]
}- 请开始我们接下来的任务——为React开发环境进行必要的设置。
- 我们需要安装一系列Babel相关的依赖包以支持React开发环境的兼容性配置。
- 安装Babel核心加载器：
$ npm install $bababeloLdEr - 配置基于环境的翻译：
$bababeloLdEr/bababeloPreset-Env - 配置基于场景的React翻译：
$bababeloLdEr/bababeloPreset-React - 使用默认翻译逻辑处理新增JavaScript语法而不处理新增API：
$bababeloLdEr/bababeloPreset-Polyfill - 处理React新语法对象Rest写法：
$bababeloLdEr/bababeloPreset-Proposal-ObjectRest-Spread - 处理类中的箭头函数this绑定以及静态属性等问题：
$bababeloLdEr/bababeloPreset-Proposal-ObjectRest-Spread
- 安装Babel核心加载器：
- 安装完成后，请按照以下步骤进行Babel配置：
- 创建
.baberc文件放置在项目根目录 - 在其中添加相应的Babel配置选项
- 启动脚本以应用全局设置
- 创建
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/proposal-object-rest-spread", // 处理对象的rest写法
"@babel/proposal-class-properties" // 处理类里面的箭头函数绑定，static属性等
]
}接下来需要在Webpack的配置文件中设置编译规则，在webpack.config.js中引入module模块，并定义针对不同文件类型的解析配置。具体操作如下：
- 选择适合的应用场景和开发流程
- 在项目根目录下创建
src/main.js文件 - 使用
esnextplit工具构建项目 - 配置必要的开发工具选项
- 定义针对不同文件类型的解析配置
- 执行编译操作以生成所需的代码
- 完成整个构建流程
- 生成最终的打包结果
module.exports = {
entry: {
app: './index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(js)x?$/,
use: ['babel-loader'],
exclude: /node-modules/ // 不解析node_modules中的文件
}
]
},
plugins: [
new CleanWebpackPlugin()
]
}- 接下来我们可以编写代码进行测试
- 因此我们需要创建一个index.html文件以实现DOM展示功能
- 同时创建一个index.jsx文件来负责React的挂载逻辑
- 在其中新建一个src文件夹用来存储React相关组件及其内部逻辑
- 并在里面新建一个app.jsx文件以实现初始组件的构建
- 代码分别如下
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/app.js"></script>
<script src="./dist/test.js"></script>
</body>
</html> // index.jsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import App from './src/app.jsx'
ReactDOM.render(
<App/>
,document.querySelector('#app')
) // app.jsx
import * as React from 'react'
class App extends React.Component{
render(){
return (
<div>123</div>
)
}
}
export default App建议在我们的Webpack配置中新增一个入口文件，并如同我们在html中的引入一样进行命名和配置
module.exports = {
entry: {
app: './index.js',
test: './index.jsx'
},
...// 省略
}- 接下来运行命令
npm run start完成打包操作。 - 打包完成后访问
index.html可以看到已成功插入数字123。 - 为了简化流程我们避免手动导入每个文件建议使用插件自动生成。
- 首先下载所需插件通过命令
npm install html-webpack-plugin。 - 然后再webpack.config.js里进行相关配置 在plugins模块中进行配置 请按照以下设置：
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './index.js',
test: './index.jsx'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(js)x?$/,
use: ['babel-loader'],
exclude: /node-modules/
}
]
},
plugins: [
new HTMLWebpackPlugin({
inject: true, // 所有js脚本放于body之后
hash: true, // 为静态资源生成hash，用于清楚缓存
cache: true, // 仅在文件被更改时发出文件
title: 'react admin',
filename: 'index.html',
template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true, // 折叠空白
removeComments: true, // 删除注释
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
}),
new CleanWebpackPlugin()
]
}请将我们的模板index.html放置于项目根目录中，并确保无需自行引入JavaScript文件即可运行；具体内容如下
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react admin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>在此之后再运行我们的npm run start 就可以在dist文件夹中自动生成我们的index.html文件了，在打开该文件后即可预览到我们要渲染的内容。
react相关的部分已经配置完成好，接下来我们需要对css部分进行设置开发中使用less作为示例进行配置。
首先需要安装必要的依赖项：less-loader、style-loader、postcss-loader、css-loader以及autoprefixer命令为 npm i less-loader style-loader postcss-loader css-loader autoprefixer -D
接下来我们需要进行Webpack的配置工作 以便能够正确解析和处理less文件
我们还是继续在module文件夹下的rules中进行相关规则的设定 如下所述
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './index.js',
test: './index.jsx'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.(le|c)ss$/,
use: [ // 解析规则为从右向左，即 less-loader, postcss-loader, css-loader, style-loader
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true //是否打开样式查找
}
},
{
loader: 'postcss-loader', // 为浏览器加前缀
options: {
ident: 'postcss',
sourceMap: true,
plugins: loaders => [
require('autoprefixer')({
})
]
}
},
{
loader: 'less-loader', // 解析样式文件
options: {
sourceMap: true
}
}
]
},
{
test: /\.(js)x?$/,
use: ['babel-loader'],
exclude: /node-modules/
}
]
},
plugins: [
new HTMLWebpackPlugin({
inject: true, // 所有js脚本放于body之后
hash: true, // 为静态资源生成hash，用于清楚缓存
cache: true, // 仅在文件被更改时发出文件
title: 'react admin',
filename: 'index.html',
template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true, // 折叠空白
removeComments: true, // 删除注释
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
}),
new CleanWebpackPlugin()
]
}配置完成后进行简单的测试，在app.jsx目录下创建位于app.jsx目录下的app.less文件，并编写相应的样式说明
.red{
color: red;
.blue{
background: blue;
}
.orange{
background: orange;
}
}- 修改app.jsx中的渲染内容为
import * as React from 'react'
import './app.less'
class App extends React.Component{
render(){
return (
<div className="red">
<div className="blue">123</div>
<div className="orange">345</div>
</div>
)
}
}
export default App- 运行
npm run start命令后，请您随后访问dist/index.html查看样式是否已应用，并使用F12进入开发者工具查找对应的div元素的位置。 - 到此为止已经实现了基础功能的演示案例，请根据项目的实际需求进行相应的配置设置。
全部评论 (0)
还没有任何评论哟~