Skip to main content

Recent posts

2 posts tagged with "react"

View All Tags

react项目搭建

jieerwenking

jieerwenking

前端开发

webpack搭建react项目#

image

1. 安装依赖包#

mkdir react_app
cd react_app
npm init --yes
npm i -D @babel/preset-env @babel/preset-react autoprefixer babel-loader css-loader html-webpack-plugin less less-loader px2rem-loader style-loader webpack webpack-cli webpack-dev-server postcss-loader
npm i --save react react-dom

2. webpack.config.js#

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.jsx",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
devtool: 'source-map',//生成单独的完整的source-map文件，方便开发
devServer: {
port: 8080,//开发服务器的端口号
hot: true,//启动热更新
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env", //解析ES+
"@babel/preset-react", //解析React JSX语法的
],
},
include: path.resolve("src"),
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader"
},
],
},
{
test: /\.less$/,
use: [
"style-loader" ,
{
loader: "css-loader", //处理import和url
options: { importLoaders: 3 }, //import的文件要导入之前需要经过几个loader的处理
},
{
loader: "postcss-loader", //加入厂商的兼容性前缀
options: {
postcssOptions: {
plugins: ["autoprefixer"],
},
},
},
{
loader: "px2rem-loader", //可以把px单位变成rem单位
options: {
remUnit: 37.5, //在标准设计稿下1rem对应的是75px
remPrecesion: 8, //计算后的小数精度是8位
},
},
"less-loader", //把less编译成css
],
},
{
test: /\.(jpg|png|gif|svg|jpeg)/,
type: "asset", //以前url-loader或者file-loader，现在不需要
},
],
},
plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

3. pageage.json#

"scripts": {
"dev": "webpack server",
"build": "webpack"
},

Vite 建立react项目#

vite官网

# npm 6.x
npm init @vitejs/app my-react-app --template react
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-react-app -- --template react

  • 理论上这样就可以了，但是根据大佬的教程npm run dev直接报错 image

  • 解决(要自己手动执行一下)

node node_modules/esbuild/install.js
npm run dev
  • 这回我以为可以了，然后浏览器里面又报错 image
  • 解决(关掉安装的浏览器 React Developer Tools 插件,可能是因为我的版本太低了，2.5.2的 4版本的插件是没有问题的)

TODO#

  • 问题只是解决了，但是并不知道是为什么

docusaurus部署

jieerwenking

jieerwenking

前端开发

因为公司一直用react，看了一下vuepress不太会，然后查了一下react用这个docusaurus很友好，就选择了这个，部署到Github pages遇到了一些问题，记录分享一下。

搭建本地的项目#

  • docusaurus官网脚手架

  • 脚手架的设计真的很良心，像react脚手架一样安装启动，my-website就是项目的名字，classic是docusaurus的默认主题，官网中也有其他的可以下载插件配置主题

npx @docusaurus/init@latest init my-website classic
  • 安装完成之后根据提示
cd my-website
npm run start
  • 这个时候已经可以在localhost:3000，看到项目的主页了

修改配置#

  • 配置文件是docusaurus.config.js，在里面修改一些主页的展示，这里的部分自己改一改都知道是什么意思了。我在这个文件中写了注释可以参考一下。

  • 侧边栏的配置文件sidebars.js，可以参考，也可以看官方文档。

  • 修改好自己的配置之后，就可以尝试部署了。

建立github pages项目 + 自动部署#

1. 准备工作#

  • 创建一个项目，然后在setting里面设置GitHub Pages, 把构建的分支改为gh-pages,这个分支是要自己建立的，目前里面什么都不用有，把当前的项目代码都推到master分支。 image
  • 注意一定要配置好docusaurus.config.js文件中的这四个属性比较重要，如果有什么问题，可能就是这里没有配置好，其他按需就可以
url: 'https://jieerwenking.github.io', // 当前页面的url，setting里面 都可以看到部署后的url
baseUrl: '/', // 这里看自己需要添加，如果添加为/win/ 访问主页就是 https://jieerwenking.github.io/win/
organizationName: 'jieerwenking', // 这里是你github的名字
projectName: 'jieerwenking.github.io', // 这个是你要部署到的github的项目名字

2. 设置自动部署#

  • 设置push到master分支之后自动部署，这个时候就要用到刚才建立好的gh-pages分支了，在根目录建立.github/workflows/documentation.yml文件，参考阮一峰大佬的博客
  • 要注意一下ACCESS_TOKEN的配置，这个要提前在github中配置一下。参考github官网
  • 要注意一下CNAME文件，如果你有自己的域名用的不是username.github.io这个域名的话，需要建立CNAME文件，并在里面写上自己的域名。
name: Deploy Github pages
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
with:
persist-credentials: false
- name: Install and Build
run: |
npm install
npm run-script build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
BUILD_SCRIPT: npm install && npm run build

3. 推送项目#

  • 把当前的项目文件都推送到master分支上，这个时候如果没有什么问题，github的action就开始工作自动部署了。在图中这个地方可以查看部署详情。部署完成后就可以打开你的主页看到部署后的内容了。大概就和官网差不多。 image image

  • 如果有其他问题，可以留言一起解决。