PrendsMoi's Blog - 技术

Deno 学习（一）

2026-08-30T00:00:00+00:00

Deno 学习（一）

安装deno，官网有详细的安装教程Deno。安装完成后可以在命令窗口输入deno命令，如下图👇
使用VsCode并安装Deno的相关插件Deno & [Deprecated] Deno，如果不安装，在进行Deno模块引入时会出现红色的波浪号警告，因为在ts中是不需要文件的扩展名，且ts不支持从url中导入模块。

使用本地服务自动更新

1. deno upgrade
2. deno install --allow-read --allow-run --allow-write -f --unstable https://deno.land/x/denon/denon.ts
3. denon -h
4. denon run --allow-env --allow-net demo.ts

demo.ts代码

5.通过deno run --allow-net demo.ts 运行，打开localhost:9000即可看见效果

docker搭建

2026-08-30T00:00:00+00:00

GitLab-CI/CD 搭建

docker搭建

# 更新apt包索引
sudo apt-get update

# 卸载旧版的docker
sudo apt-get remove docker docker-engine docker.io containerd runc

# 一键安装docker
curl -sSL https://get.daocloud.io/docker | sh

gitlab搭建

安装gitlab

# docker安装gitlab镜像
docker pull gitlab/gitlab-ce:latest

# 运行gitlab的docker
docker run \
    --publish 8443:443 --publish 8080:80 --publish 2222:22 \
    --name gitlab \
    --volume /home/gitlab/config:/etc/gitlab \
    --volume /home/gitlab/logs:/var/log/gitlab \
    --volume /home/gitlab/data:/var/opt/gitlab \
    gitlab/gitlab-ce

 # 暂时关闭服务器防火墙
 systemctl stop firewalld

 # 浏览器输入 http://ip:port 访问gitlab

优化gitlab的内存占用

# 进入到gitlab的bash
docker exec -it ${gitlab的docker id} /bin/bash

# 编辑gitlab的配置文件
vi /etc/gitlab/gitlab.rb

###### 修改配置内容start ######

puma['worker_processes'] = 4 # 去掉#注释 设置进程 不能低于2
puma['worker_timeout'] = 60 # 设置超时时间

###### 修改配置内容end ######

# 重启gitlab
gitlab-ctl restart

配置gitlab clone克隆地址

# 进入到gitlab的bash
docker exec -it ${gitlab的docker id} /bin/bash

# 编辑配置文件
vi /etc/gitlab/gitlab.rb

###### 修改配置内容start ######
external_url 'http://ip:port'  # 访问地址 port为docker run时设置的8080

gitlab_rails['gitlab_shell_ssh_port'] = 2222 # ssh端口号 为docker run时设置的2222

gitlab_rails['gitlab_ssh_host'] = ip # ssh的访问ip
###### 修改配置内容end ######

# 修改配置文件
vi /opt/gitlab/embedded/service/gitlab-rails/config/gitlab.yml

###### 修改配置内容start ######
host ip地址  # 设置ip地址
port 访问端口 # 设置访问端口 同external_url设置的端口号
###### 修改配置内容end ######

# 重启gitlab
gitlab-ctl restart

安装配置git-runner

# 安装git-runner
sudo docker run -d --name gitlab-runner --restart always \
  -v /home/gitlab-runner/config:/etc/gitlab-runner \
  -v /var/run/docker.sock:/var/run/docker.sock \
  gitlab/gitlab-runner:latest

# 注册
docker run --rm -v /srv/gitlab-runner/config:/etc/gitlab-runner gitlab/gitlab-runner register \
  --non-interactive \
  --executor "docker" \
  --docker-image alpine:latest \
  --url "" \
  --registration-token "" \
  --description "first-register-runner" \
  --tag-list "vue3-app" \
  --run-untagged="true" \
  --locked="false" \
  --access-level="not_protected"

注册需要token和url，获取方式如下图

CI/CD配置yaml脚本需要的变量

编写.gitlab-ci.yml 🏁

stages:
  - init # 初始化
  - lint # 校验
  - build # 打包
  - deploy # 部署

# 在流水线中使用package.json缓存node_modules,只要package.json内容没变就一直使用缓存
cache:
  key:
    files:
      - package.json
  paths:
    - node_modules/

# npm i 安装
init:
  stage: init
  only:
    refs:
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"
  script:
    - npm cache clean --force
    - npm install -g cnpm --registry=https://registry.npm.taobao.org
    - cnpm install
  after_script:
    - chmod a+x ./dingding.sh # 给钉钉的脚本添加权限
    - ./dingding.sh  # 执行钉钉脚本

# 代码校验
lint:
  stage: lint
  only:
    refs:
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop"
  script:
    - npm run lint:jsx
    - npm run lint:css
  allow_failure: true

# 开始构建
build:
  stage: build
  artifacts:
    # 文件名
    name: 'dist'
    # 过期时间
    expire_in: 60 mins
    # 需要打包目录
    paths:
      - dist/
  only:
    refs:
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop" # 表示只有往 develop分支提MR才会触发部署
  script:
    - npm run build:test
  after_script:
    - chmod a+x ./dingding.sh # 给钉钉的脚本添加权限
    - ./dingding.sh  # 执行钉钉脚本

deploy:
  stage: deploy
  only:
    refs:
      - merge_requests
    variables:
      - $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "develop" # 表示只有往 develop分支提MR才会触发部署
  script:
    - 'which ssh-agent || ( apk update && apk add openssh-client)' # 预先装 ssh-agent
    - eval $(ssh-agent -s) # 启动服务
    - mkdir -p  /etc/ssh/
    - chmod 700  /etc/ssh
    - echo "$SSH_KNOWHOST" > /etc/ssh/known_hosts
    - echo "$SSH_PRIVATE_KEY" > /etc/ssh/id_rsa
    - echo "$SSH_CONFIG" > /etc/ssh/ssh_config.d/config.conf
    # 配置较低权限
    - chmod 600 /etc/ssh/id_rsa
    - chmod 600 //etc/ssh/ssh_config.d/config.conf
    - chmod 644 /etc/ssh/known_hosts
    # 注入密钥
    - ssh-add /etc/ssh/id_rsa
    - ssh Aliyun "rm -rf /var/www/project/test"
    - scp -i /etc/ssh/id_rsa -r ./dist/ "$SSH_USERNAME"@"$SSH_HOST":/var/www/project/test/
  after_script:
    - chmod a+x ./dingding.sh # 给钉钉的脚本添加权限
    - ./dingding.sh  # 执行钉钉脚本
  when: on_success

钉钉配置

群助手设置
- 创建群
- 添加智能群助手
- 添加自定义机器人
- 配置机器人
shell脚本

#!/bin/bash
##################
# 钉钉通知
# 自动化部署脚本中使用
##################

webhook="https://oapi.dingtalk.com/robot/send?access_token=${DINGDING_TOKEN}" # 你自己创建的钉钉机器人的地址

# 推送模板发送（模板拼接）
function sendDingTalkNotifications() {
      local text="#### git名称：${CI_PROJECT_NAME} \n ##### 构建分支：${CI_COMMIT_REF_NAME} \n ##### 构建状态：${DEPLOY_STATUS}\n #### 提交者：${GITLAB_USER_NAME}-${GITLAB_USER_EMAIL} \n\n\n ##### 更新内容：${CI_COMMIT_MESSAGE} \n ##### [流水线 Pipeline #${CI_PIPELINE_ID}](${CI_PROJECT_URL}/pipelines/${CI_PIPELINE_ID}) \n
      "
      curl POST "$webhook" -H 'Content-Type: application/json' -d "{\"msgtype\": \"markdown\",\"markdown\": {\"title\":\"${CI_PROJECT_NAME}\",\"text\": \"$text\"}}"
}

if [ "$?" -eq "0" ];then  # "$?" -eq "0" 表示上一句脚本执行成功，1的话表示失败
      case ${CI_JOB_STAGE} in
            "init")
                  DEPLOY_STATUS='初始化安装成功!'
                  sendDingTalkNotifications
            ;;
            "build")
                  DEPLOY_STATUS='构建成功!'
                  sendDingTalkNotifications
            ;;
            "deploy") DEPLOY_STATUS='部署成功!'
                  sendDingTalkNotifications
            ;;
      esac
else
      case ${CI_JOB_STAGE} in
            "init"|"build")
                  DEPLOY_STATUS='构建失败!'
                  sendDingTalkNotifications
            ;;
            "deploy")
                  DEPLOY_STATUS='部署失败!'
                  sendDingTalkNotifications
            ;;
      esac

fi

⚠️注意点

git-runner执行时候权限问题
- 进入gitlab-runner的docker，修改/etc/passwd文件中的gitlab-runner的权限与root同等级0

参考文章

Docker 教程 | 菜鸟教程 (runoob.com)

使用docker搭建gitlab环境 - SegmentFault 思否

GitLab+Docker快速搭建CI/CD自动化部署 (juejin.cn)

利用 Gitlab CI/CD + Jenkins 实现自动构建，自动部署 (juejin.cn)

Gitlab-CI 配置文件 .gitlab-ci.yml 详细说明，基于官方文档翻译 | 渡渡岛 (ssoor.github.io)

设置 SSH 通过密钥登录 | 菜鸟教程 (runoob.com)

GitLab 14 轻量化运行方案 - 苏洋博客 (soulteary.com)

前端工程化之 CI/CD | Zander Hsueh (xuezenghui.com)

Ghost博客搭建小记

2026-08-30T00:00:00+00:00

Ghost博客搭建小记

前言

之前Wordpress版博客因为升级导致软件系统崩溃，因此博客也停了许久。前几日突然想把个人博客这块再搭建起来，虽然Wordpress的数据备份还在，却不想再使用。于是开始寻找新的博客系统，通过搜寻发现了Ghost。挺中意它的风格，就着手开始搭建。

购买域名&服务器

服务器选择的阿里云的突发性能T5服务器，域名则是之前在Godaddy购买的。但是购买阿里的服务器部署绑定需要备案，只能将域名从Godaddy中转出。转出方法请看👉Godaddy域名转阿里云。之后解析对应的DNS就好了。

服务器系统选择&Ghost搭建

系统&服务器安全组

系统选择，Ghost官方推荐Ubuntu，也有对应的教程，所以这里我就使用Ubuntu(我不想说我开始使用CentOs折腾了好久，最后还是没成功(￣▽￣")...)
⚠️安全组配置（这个不能忘！！！），阿里云服务器默认80等端口不对外开放，所以创建完服务器一定要配置！因为遗忘这个，导致我后续搭建完Ghost总是无法访问。下面是80端口配置规则，如需要https对应配置443端口。若需要其他端口同理。见下方截图👇

Ghost搭建

SSH连接服务器后，根据官方Ubuntu环境下搭建Ghost步骤搭建即可。（注：在ghost install时，步骤Downloading Ghost step 5/5，可能会出现卡住的现象，多数是网络环境不好，重新安装多尝试几次。)之后的根据文档输入（选择）对应的信息（需求），官方安装工具有集成 Let's Encrypt的htpps配置，只需填写邮箱就好了（用于接收SSL证书过期消息）。安装完成就可以通过域名访问啦。

Kaldorei主题配置

这个主题的一些配置，都有文档教程，对应修改就好。

Typora&PicGo图床(Mac环境)

这个按我个人需求添加的，如果没有特殊需求可以直接使用Ghost后台的Markdown。

1. Typora配置（偏好设置->图像->上传服务设定选择PicGo.app），下载PicGo.app

2. PicGo.app配置

PicGo.app支持阿里云等多个图床服务设置，相关配置教程看这👉PicGo图床配置。PicGo配置完后可以在Typora中点验证图片上传选项按钮进行验证。验证成功记得配置插入图片时上传图片，见上方Typora配置图。

至此，这篇小记就结束了，如果有什么需要我帮助的，请在评论区留言。感谢阅读。完结撒花🎉

秒杀倒计时问题记录及处理方案

2026-08-30T00:00:00+00:00

秒杀倒计时问题记录及处理方案

后台挂起倒计时停止问题自定义一个setTimeout来记录时间的走动，当时间跨度不正确时，调整倒计时时间

// 执行次数
let count = 0
// 本地时间
const localStart = new Date().getTime()
// 计时间隔
const interval = 1000
// 上一次时间
let lastTime = 0
// 计时器
let timeScreen = ''
function isLockScreen() {
  count++
  const nowTime = new Date().getTime()
  // 偏差
  const offset = nowTime - (localStart + count * interval)
  // 判断是否锁屏阻塞
  if(lastTime !== 0 ) {
    if((nowTime - lastTime) > (offset + 1200) || nowTime < lastTime) {
      lastTime = 0
      // 重新调用
      this.init()
      return false
    }
  }
  lastTime = nowTime - offset
  let nextTime = interval - offset
  if(nextTime < 0){
    nextTime = 0
  }
  timeScreen = setTimeout(this.isLockScreen, nextTime)
}

App内切换webView页面刷新问题其实这个并不算倒计时的问题，但是在这个项目中遇到也就记录一下吧！说到这个问题真的很揪心，因为当时遇到这个问题，发现这是因为调用App的原生事件去打开新的WebView页面，导致当前H5的href并没有变更。想到的第一个处理方案是希望App端能否提供一个事件监听供我回调，但是App之前没有这个开发需求，项目又急着上线，所以只能放弃。之后想到新的WebView是否会阻塞旧的webView的js，尝试过后发现并不会！然后开始去Google搜索，发现一个visibilitychange的监听事件和document.hidden的属性，尝试使用后，方案可行。

document.addEventListener('visibilitychange', () => {
  if(!document.hidden){
    this.init()
	}
}, false)

事件和属性的Api链接

webpack多页面配置

2026-08-30T00:00:00+00:00

webpack多页面配置

之前都是使用脚手架直接生成的webpack配置，然后根据需求适当调整便使用了。最近空闲下来，然后就想从零开始写一个webpack配置，在此记录一下配置过程以及遇到的一些问题吧。

node环境、npm或者yarn包管理器
创建一个新文件夹，然后使用npm或者yarn初始化
添加webpack依赖，创建一个webpack.config.js文件。顺便创建文件目录等
根据需要安装插件，目前我所用的到插件有

{
  "name": "interview",
  "version": "1.0.0",
  "description": "面试题记录",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "glob": "^7.1.7",
    "html-loader": "^2.1.2",
    "node-sass": "^6.0.0",
    "postcss": "^8.3.0",
    "postcss-loader": "^5.3.0",
    "postcss-px2rem": "^0.3.0",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack-dev-server": "^3.11.2"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "copy-webpack-plugin": "^9.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.6.0",
    "optimize-css-assets-webpack-plugin": "^6.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0"
  }
}

其中一些loader，例如css-loader、style-loader等都是针对于css处理的，因为extract-text-webpack-plugin在webpack4中使用存在一些问题，而且官方建议使用mini-css-extract-plugin插件，所以我这里就使用官方推荐了。
@babel/core、@babel/preset-env等是针对编译js所引入的包处理
webpack-dev-server开发使用的本地服务，可以配置端口号、热更新等服务

遇到的问题：

~~px转rem插件无法处理sass~~改用webpack-px-to-rem
html无法进行热更新（将热更新关闭，使用页面自动刷新，比较耗费性能）

webpack.config.js文件内容

/*
 * @Author: PrendsMoi
 * @GitHub: https://github.com/PrendsMoi
 * @Blog: https://liuhgxu.com
 * @Description: webpack配置
 * @FilePath: /interview/webpack.config.js
 * @Date: 2021-05-30 11:27:51
 * @LastEditors: PrendsMoi
 * @LastEditTime: 2021-06-13 12:03:35
 */
const webpack = require('webpack')
const path = require('path')
const glob = require('glob')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

// 获取多页面
const getPages = (argv) => {
  const isDev = argv.mode === 'development'
  const views = glob.sync('src/views/**/*.html')
  const viewJs = glob.sync('src/views/**/*.js')
  const config = {
    hash: true,
    inject: true,
    minify: {
      removeComments: !isDev,
      collapseWhitespace: !isDev
    }
  }
  const entries = {}
  const htmls = []
  views.forEach(item => {
    const fileInfo = path.parse(item)
    console.log(viewJs.includes(`${fileInfo.dir}/${fileInfo.name}.js`))
    if (viewJs.includes(`${fileInfo.dir}/${fileInfo.name}.js`)) {
      entries[fileInfo.dir.split('/').slice(-1)[0]] = `./${item}`.replace('.html', '.js')
    }
    htmls.push(new HtmlWebpackPlugin({
      ...config,
      filename:  `${fileInfo.name}.html`,
      template: `./${fileInfo.dir}/${fileInfo.name}.html`,
      chunks: [ 'vendor', 'commons', fileInfo.name]
    }))
  })
  const entry = Object.assign({'babel-polyfill': ['babel-polyfill'],commons: './src/app.js'}, entries)
  return {
    entries: entry,
    htmls
  }
}
module.exports = (env, argv) => ({
  entry:  getPages(argv).entries,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: (argv.mode === 'development') ? './js/[name].js' : './js/[name].[contenthash].js',
    chunkFilename: (argv.mode === 'development') ? './js/[name].js' : './js/[name].[contenthash].js',
    publicPath: (argv.mode === 'development') ? '' : './'
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          (argv.mode === 'development') ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { importLoaders: 2 }
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'expanded'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ['last 10 versions', 'ie >= 9'],
                  flexbox:true,
                  remove: false
                }),
                // require('postcss-px2rem')({remUnit: 75})
              ]
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            sources: false
          }
        }
      },
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        use: 'babel-loader'
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader'
          }
        ]
      },
      {
        test: /\.(woff2|woff|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  resolve: {//解析模块可选项
  },
  plugins: [
    ...getPages(argv).htmls,
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({filename:(argv.mode === 'development') ? "css/[name].css" : 'css/[name].[hash].css', chunkFilename: '[id].css'}),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, './src/assets'),
          to: 'assets',
          noErrorOnMissing: true
        }
      ],
      options: {}
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          require('postcss-px2rem')({remUnit: 37.5})
        ]
      }
    })
  ],
  devtool: (argv.mode === 'development') ? "eval" : "nosources-source-map",
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'async',
          name: 'commons',
          minChunks: 2,
          maxInitialRequests: 5,
          // minSize: 0
        },
        vendor: {
          test:/node_modules/,
          chunks:'all',
          name:'vendor',
          priority:10
        }
      }
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: (argv.mode === 'development') ? true : false
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,  //是否启用gzip
    host: 'localhost',
    port: 9000,
    hot: true, // 热更新
    open: true,
    overlay: true,
    inline: true,
    watchContentBase: true
  }
})

.babelrc文件

{
	"presets": ["@babel/preset-env"],
	"plugins": ["@babel/plugin-transform-runtime"]
}