专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

工具

  • pnpm 介绍

    / 分类: 工具 / No Comments

    本文介绍了pnpm的常用命令, 对于从npm/yarn迁移到pnpm, 或基于pnpm搭建内部组件库等场景, 或发布到私有仓库, 可参考使用.

    pnpm 常用命令

    pnpm outdated # 查看过时的包
    # init package.json
    pnpm init
    # package.json 中 `"type": "module"` # 使用ESM规范(支持import), 不设置为CJS
    # package.json 可以设置包名的命名空间, 比如 "name": "@examples/pkg-b" (不能多个/)
    
    # 安装 workspace 内的所有依赖 -f(--force)
    pnpm i
    # 从根目录运行命令
    pnpm -F <包目录名/包name/正则> <command> # -F等价于–filter
    # 列出包信息/引用信息
    pnpm why <package-name> -r
    # 具体package 安装依赖
    pnpm -F <package-name> add axios -D
    # 具体package, 移除依赖
    pnpm -F <package-name> remove axios
    # packageA 中引用 packageB
    # packageA 中可以 import { xxx } from 'packageB'
    pnpm -F packageA add packageB --workspace
    # 执行所有package的 命令 (如build/test), parallel并行执行, r查找所有包
    pnpm run --parallel -r <command>
    # 更新npm包版本, -L 最新版
    pnpm -F web-vue up xxx -L
    pnpm up vite@4.2.0 # 升级/降级 npm包
    # 更新工作区link关系
    pnpm up --workspace
    # 下载和执行 xxx
    pnpm dlx create-react-app
    pnpm dlx create-vue # Vite
    # 从 create-* 创建项目
    pnpm create react-app demo-react #  create-react-app
    pnpm create vue demo-vue # create-vue
    # pnpm create vite vue-vite --template vue-ts

    查看全文 »

  • npm包 CDN 收集

    / 分类: 工具 / No Comments

    jsDelivr(支持 combine)
    `https://cdn.jsdelivr.net/npm/:package@:version/:file`
    # https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
    unpkg
    `https://unpkg.com/:package@:version/:file`
    # https://unpkg.com/jquery@3.6.0/dist/jquery.min.js
    饿了么
    `https://npm.elemecdn.com/:package@:version/:file`
    # https://npm.elemecdn.com/jquery@3.6.0/dist/jquery.min.js
    知乎
    `https://unpkg.zhimg.com/:package@:version/:file`
    # https://unpkg.zhimg.com/jquery@3.6.0/dist/jquery.min.js
    百度
    `https://code.bdstatic.com/npm/:package@:version/:file`
    # https://code.bdstatic.com/npm/jquery@3.6.0/dist/jquery.min.js

    jsDelivr国内可能部分网络有问题, 但仅jsDelivr才支持combine(多个文件合并).
    使用CDN引入, 可以独立公共资源, 省去webpack打包. 当然, 也有人用来做图床.

  • Mac自签名ssl证书, 绑定域名启用https

    / 分类: 工具,实践 / No Comments

    生成root CA(仅需一次)

    自签名证书, IOS 13/macOS 10.15有了新规定, 所以需要按如下方式生成.

    # 多个域名都可以用root CA签名
    mkdir ~/.ssl; cd ~/.ssl;
    openssl genrsa -out rootca.key 2048;
    openssl req -new -key rootca.key -out rootca.csr -sha256 -subj "/CN=Dev Root CA"
    echo "basicConstraints=CA:true" > rootca.cnf;
    openssl x509 -req -in rootca.csr -signkey rootca.key -out rootca.crt -extfile rootca.cnf -sha256 -days 825;
    open rootca.crt; # Mac钥匙串 打开(或, 双击文件名)
    # 钥匙串: 搜索 Dev Root CA, 双击证书, 设置始终信任 (Trust - When using this certificate: Always Trust).
    # for Android:
    # openssl x509 -inform PEM -outform DER -in rootca.crt -out rootca.der.crt

    创建本地ssl证书(使用lvh.me域名)

    openssl req -new -newkey rsa:2048 -nodes -keyout lvh.me.key -out lvh.me.csr -sha256 -subj "/CN=lvh.me"
    cat > domain.cnf <<-EOF
    authorityKeyIdentifier=keyid,issuer
    basicConstraints=CA:false
    keyUsage=digitalSignature,keyEncipherment,dataEncipherment
    extendedKeyUsage=serverAuth,clientAuth
    subjectAltName=@alt_names
    [alt_names]
    DNS.1=lvh.me
    DNS.2=*.lvh.me
    DNS.3=*.test.lvh.me
    EOF
    # 使用root CA签名
    openssl x509 -req -in lvh.me.csr -out lvh.me.crt -extfile domain.cnf -CA rootca.crt -CAkey rootca.key -CAcreateserial -sha256 -days 825

    lvh.me 是一个指向127.0.0.1的泛域名服务, 优点: 不需要改DNS/hosts, 各项目使用不同的域名方便隔离(比如cookies/密码管理器). 类似的还有xip.io, nip.io, localtest.me, fuf.me, vcap.me等.

    使用Apache或Nginx 绑定域名

    • 使用Apache

      # 1. 编辑 `/etc/apache2/httpd.conf`
      # 注释掉 这些行:
      LoadModule mpm_prefork_module libexec/apache2/mod_mpm_prefork.so
      Include /private/etc/apache2/extra/httpd-ssl.conf
      # 最下面添加:
      Listen 443
      ServerName localhost
      LoadModule mpm_event_module libexec/apache2/mod_mpm_event.so
      LoadModule proxy_module libexec/apache2/mod_proxy.so
      LoadModule proxy_http_module libexec/apache2/mod_proxy_http.so
      LoadModule macro_module libexec/apache2/mod_macro.so
      LoadModule ssl_module libexec/apache2/mod_ssl.so
      LoadModule socache_shmcb_module libexec/apache2/mod_socache_shmcb.so
      LoadModule http2_module libexec/apache2/mod_http2.so
      Include /Users/leon/.ssl/httpd-vhosts.conf
      
      # 2. 编辑 ~/.ssl/httpd-vhosts.conf, 增加:
      <Macro SSLLvh>
        SSLEngine on
        SSLCertificateFile /Users/leon/.ssl/lvh.me.crt
        SSLCertificateKeyFile /Users/leon/.ssl/lvh.me.key
        Protocols h2 http/1.1
      </Macro>
      <Macro Test>
        ServerName test.lvh.me
        ProxyRequests off
        <Location />
          ProxyPass http://localhost:3000/
          ProxyPassReverse http://localhost:3000/
        </Location>
      </Macro>
      <VirtualHost *:80>
        Use Test
      </VirtualHost>
      <VirtualHost *:443>
        Use SSLLvh
        Use Test
      </VirtualHost>
      <Macro Demo>
      # ...
      </Macro>
      <VirtualHost *:443>
        Use SSLLvh
        Use Demo
      </VirtualHost>
      
      # 3. 启动Apache
      # sudo apachectl configtest # test
      sudo apachectl -k restart # 启动
      # sudo apachectl -e debug # print errors
      # sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist # 开机启动

    查看全文 »

  • 使用letsencrypt自动生成和续期HTTPS证书

    / 分类: 工具,实践 / No Comments

    相信一些同学注意到了, 本站启用了https, 域名改成了xhl.me, 服务也早就全都改用docker了.
    顺带介绍下之前搞的两个个docker项目: alpine-tengine, docker-backup.

    *本文主要介绍letsencrypt证书的创建和通配符HTTPS证书生成, 还有基于letsencrypt docker镜像实现证书自动续期.

    Let's Encrypt 是一个自动签发免费HTTPS证书的非营利机构, 生成的证书有3个月有效期, 到期可以免费续期.
    Certbot 是 Let's Encrypt 官方推荐的生成证书的客户端工具, 文档.

    使用dnsrobocert生成证书(支持通配符域名证书), 并自动续期

    这个项目, 集成了certbot(证书生成命令行工具), Lexicon(DNS记录修改工具, 主流DNS服务商都支持).
    另外还自带了crontab 定时任务, 只要服务启动, 就会自动续期域名了.

    1. 创建, /etc/dnsrobocert/config.yml, 内容类似这样:
    # https://git.io/JL1cD
    draft: false
    acme:
      email_account: <youremail>
      staging: false
    profiles:
    - name: cloudflare
      provider: cloudflare
      provider_options:
        auth_username: <cloudflare_email>
        auth_token: <cloudflare_token>
    - name: dnspod
      provider: dnspod
      provider_options:
        auth_username: <dnspod_id>
        auth_token: <dnspod_token>
    certificates:
    - domains:
      - "*.xhl.me"
      -  xhl.me
      profile: cloudflare
      # autorestart:
      #   - containers:
      #     - nginx
      autocmd: # 自动重启
        - cmd: nginx -s reload
          containers:
          - nginx
    # - domains:
    #   - "*.test.com"
    #   profile: dnspod
    #   ...
    2. 根据DNS PROVIDER信息验证, 并自动创建和续期证书
    docker run -it --rm --name letsencrypt2 \
      -v /etc/dnsrobocert:/etc/dnsrobocert \
      -v /etc/letsencrypt:/etc/letsencrypt \
      -v /var/run/docker.sock:/var/run/docker.sock \
      adferrand/dnsrobocert

    LEXICON_PROVIDER 主流的DNS服务都支持, 比如:

    查看全文 »

  • 由linode改为搬瓦工

    / 分类: 工具,生活 / No Comments

    Linode jp2虽然ping值不错(白天), 但测试油管速度很差. 看到搬瓦工vps的GIA和香港机房信息, 测试了下, 速度好太多(下面有对比).
    感觉性价比不错的几款:

    SPECIAL 20G KVM PROMO V3 - LOS ANGELES - CN2

    内存: 1G; CPU: 1核; 硬盘: 20GB SSD; 流量: 1000GB/月; 带宽: 1Gbps;
    年付: $49.99(29RMB/月), CN2线路(电信/联通直连)

    [推荐] SPECIAL 20G KVM PROMO V5 - LOS ANGELES - CN2 GIA ECOMMERCE

    内存: 1G; CPU: 2核; 硬盘: 20GB SSD; 流量: 1000GB/月; 带宽: 2.5Gbps;
    季付: $49.99(约100RMB/月), CN2 GIA线路(电信/联通/移动直连);
    性价比不错, 不仅适合建站, 大宽带还可以做其他事.

    SPECIAL 40G KVM PROMO V5 - HONG KONG CN2 GIA

    内存: 2G; CPU: 2核; 硬盘: 40GB SSD; 流量: 500GB/月; 带宽: 1Gbps;
    香港机房(电信/联通/移动直连), 香港机房价格一直涨, 便宜方案早下架了.
    现在最便宜: $89.99/月, 没性价比了, 土豪随意.

    *热门的很容易被抢光, 如果暂未补货/售空, 可以点这里查看所有的类型
    *付款使用优惠码: BWH3HYATVBJW 省6.58%. 支持支付宝/微信/PayPal付款.
    *续费按首次购买价格, 不受涨价影响
    *性价比: CN2 GIA > CN2 > 香港

    油管测试(* 长沙电信100M, 都装了bbr)

    6K-7W Kbps # GCE 台湾(最近一直受干扰, 不太稳)
    3.5W-4.5W Kbps # 搬瓦工 CN2 GIA (比较稳, 油管4k没问题)
    6W-8W Kbps # 搬瓦工 香港 (比较稳, 油管4k没问题)
    2K-4K Kbps # Linode JP2

    *不影响体验, 一般至少要1w+的Kbps, CN2 GIA/香港/CN2线路都不错, 搬瓦工带宽1Gbps算非常难得了.
    如果要玩docker,建议至少选1G内存的.

    另外, 发现搬瓦工在卖SS服务(有3种套餐类型), 有GIA或香港线路, 最便宜~20RMB/月.
    同样支持PayPal/支付宝付款, 付款可用优惠码JMS9272283.