使用Vite+React+TypeScript+GitHubPages进行快速网站发布置

2 年 ago
新, 韵
2 minutes

首先

在业务中，我们使用Vue.js+JavaScript。然而，我想要尝试一些更现代的框架和语言…所以我选择了React和TypeScript，开始制作一个简单的WEB应用程序。

十月底的某天突然想到了：“对了，十二月会有Qiita Advent Calendar啊…希望能在那之前完成并公开。”于是我开始了开发，预计要花一个半月左右的时间进行设计和公开。

由于折角，所以我试着将制作过程记录并转化为文章。

因此，本文将成为以下系列的第五篇。
请同时阅读其他文章。
【1. 想法选择】
【2. 技术选择】
【3. 设计（逻辑）】
【4. 设计（美学）】
【5. 环境构建】←目前正在进行中
【6. 进展管理】

顺便提一下，公开网站在这里↓
https://yutamanaka.github.io/FragranceFinder/

以下是存储库链接：
https://github.com/YutaManaka/FragranceFinder

本文概述了环境搭建和网站发布的方法。

目标人群

这篇文章的目标读者是以下类型的人。

    • 駆け出しエンジニア

 

    • プログラミング初学者

 

    • React勉強中の方

 

    • TypeScript勉強中の方

 

    フロントエンドのポートフォリオを無料で公開したい方

结论

如果使用Vite+React+TypeScript+GitHubPages，即使是初次接触也能在1小时之内完成环境搭建并发布网站。

应用技术。

    • 言語/フレームワーク

JavaScript
typescript@5.2.2
react@18.2.0

ライブラリ

gh-pages@6.0.0
husky@8.0.3
lint-staged@15.0.2
eslint@8.53.0
prettier@3.0.3

開発環境

vite@4.5.0

本番環境

GitHub Pages

バージョン管理

GitHub

1. 使用Vite+React+TypeScript创建项目【仅需10分钟】

假设Node.js已安装完毕。
如果尚未安装，请点击这里。
首先让我们用vite创建一个项目。
要创建名为sample-project的项目，请执行以下命令。

npm create vite@latest sample-project -- --template react-ts

好的，完成得真快！
我们立即启动开发服务器吧。

cd sample-project
npm i
npm run dev
スクリーンショット 2023-11-06 23.40.58.png

2. 实施eslint【5分】

我们把衣服放进滚筒式干衣机吧。

npm add -D eslint
npm eslint --init

创建一个名为 .eslintrc.json 的文件。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "standard-with-typescript",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:react/jsx-runtime"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "jsx-a11y",
        "react",
        "react-hooks"
    ],
    "rules": {
    },
    "settings": {
        "react": {
             "version": "detect"
        }
    }
}

下一步，在package.json中添加以下内容

"scripts": {
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix && git add -u"
  }

3. prittier引入【5分】

我们要安装整形工具。

npm add -D prettier eslint-config-prettier

接下来，创建一个.prettierrc.json文件。

{
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true
}

然后，在package.json文件中添加以下内容。

"scripts": {
    "format": "prettier --write src"
  }

4. 哈士奇的引进【10分】

在提交时添加Lint和格式化工具。

npm add -D lint-staged husky
npm husky install
npx husky add .husky/pre-commit "npx lint-staged && git add -u"

当你提交代码时，它将自动运行lint并格式化代码后再提交。环境搭建到此为止！即使是初次接触，通过研究也只用了30分钟就完成了。

5. 在GitHub Pages上发布网站【30分钟】

既然我们费了这么大力气构建了，就让我们免费向全世界公开吧！这次我们将使用GitHub Pages。

npm install gh-pages --save-dev

接下来，在package.json中添加”predeploy”和”deploy”。

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
    "build": "tsc && vite build",
  }

接下来，在vite.config.ts中添加以下内容。

export default defineConfig({
  base: '/リポジトリ名',
  plugins: [react()]
})

最后，执行以下命令！

npm run deploy
スクリーンショット 2023-11-07 0.05.40.png

只要执行上述命令，您就可以在需要时部署以前或部署完成。
GitHub Pages的网址是什么？

https://アカウント名.github.io/リポジトリ名/

这是。 (zhè shì)

顺便提一下，我的公开网站在这里↓
https://github.com/YutaManaka/FragranceFinder

以下为仓库链接：
https://yutamanaka.github.io/FragranceFinder/

最后

我整理了使用Vite+React+TypeScript+GitHub Pages进行环境搭建和网站发布的方法。

以下是参考资料

    • ViteでTypeScript×Reactの開発環境を構築してみた

 

    • Vite, React, TS, ESLint, Prettier, Husky, lint-staged… etc Setup

Deploying Vite / React App to GitHub Pages
静的サイトのデプロイ

bannerAds