发布轮子到 npm

芝麻凛 2021年11月07日 565次浏览

发布轮子到 npm

要做两件事

部署官网

  • 让官网上线,有好的文档才更容易让人使用

发布 sakura-ui

  • 让其他开发者可以使用 npm install sakura-ui 安装源码

发布你的官网

// 其实就是把 dist 目录上传到网上
yarn build 时要注意设置 build path

发布官网的步骤

  • 如果有 dist 目录,则删除 dist 目录
  • 在 .gitignore 添加一行 /dist/ 然后提交代码
  • 运行 yarn build 创建出最新的 dist
  • 运行 hs dist 在本地测试网站是否成功运行
  • 部署到 GitHub

运行命令

cd dist
git init
git add .
git commit -m "first commit"
git branch -M master
git remote add origin 以git@开头的仓库地址
git push -f -u origin master 
cd ..

开启 sakura-ui的 Pages 功能

部署到码云

设置 build path

一键部署

根目录新建 deploy.sh 文件

rm -rf dist &&
yarn build &&
cd dist &&
git init &&
git add . &&
git commit -m "update" &&
git branch -M master &&
git remote add origin git@github.com:XXXXXXX/XXXXXXX-UI.git &&
git push -f -u origin master &&
cd -
echo https://XXXXXXX.github.io/XXXXXXX-UI/index.html  //预览链接

然后运行 sh deploy.sh

打包库文件

vite暂不支持,需要自行配置rollup

第一步:创建 lib/index.ts

将所有需要导出的东西导出

export { default as Switch } from './Switch.vue';
export { default as Button } from './Button.vue';
export { default as Tabs } from './Tabs.vue';
export { default as Tab } from './Tab.vue';
export { default as Dialog } from './Dialog.vue';
export { openDialog as openDialog } from './openDialog';

第二步:rollup.config.js

告诉 rollup 怎么打包

// 请先安装 rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terser
// 为了保证版本一致,请复制我的 package.json 到你的项目,并把 name 改成你的库名
import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"

export default {
  input: 'src/lib/index.ts',
  output: [{
    globals: {
      vue: 'Vue'
    },
    name: 'Sakura',
    file: 'dist/lib/sakura.js',
    format: 'umd',
    plugins: [terser()]
  }, {
    name: 'Sakura',
    file: 'dist/lib/sakura.esm.js',
    format: 'es',
    plugins: [terser()]
  }],
  plugins: [
    scss({ include: /\.scss$/, sass: dartSass }),
    esbuild({
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015' 
    }),
    vue({
      include: /\.vue$/,
    })
  ],
}

第三步:运行 rollup -c

  • 请先全局安装 rollup(或者局部安装)
  • yarn global add rollup
  • npm i -g rollup

发布 dist/lib/ 目录

其实就是上传到 npm 的服务器

第一步:添加 files 和 main

打开 package.json

{
  "name": "sakura-ui-dev",
  "version": "0.0.1",
  "files": [
    "dist/lib/*"
  ],
  "main": "dist/lib/sakura.js",
  "module": "dist/lib/sakura.esm.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "resolutions": {
    "node-sass": "npm:sass@1.26.11"
  },
  "dependencies": {
    "github-markdown-css": "4.0.0",
    "marked": "1.1.1",
    "prismjs": "1.21.0",
    "vue": "3.0.0",
    "vue-router": "4.0.0-beta.3"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "3.0.0",
    "rollup-plugin-esbuild": "2.5.0",
    "rollup-plugin-scss": "2.6.0",
    "rollup-plugin-terser": "7.0.2",
    "rollup-plugin-vue": "6.0.0-beta.10",
    "sass": "1.32.11",
    "vite": "1.0.0-rc.1"
  }
}

第二步:npm login & npm publish

  • 请确保你没有在使用淘宝源,请使用官方源
  • npm config get registry
  • npm config set registry
  • https://registry.npmjs.org/

一些可能出现的问题

name

  • package 的 name 必须是小写字母,可用 - 或 _ 连接
  • package 的 name 不能跟 npm 上现有的 name 重名

version

  • 每次 publish 的版本不能与上一次的相同
  • 所以从第二次开始,必须先改 version 再 publish

注册 npmjs.com 账号

  • 用网页注册,然后在命令行使用 npm login 登录
  • 登录之后才能 npm publish
  • 使用 npm logout 可以退出登录

如何升级 Vue 2 到 Vue 3

使用 Vue 官方提供的工具教程

支持低版本的node

  • node 10、12 不支持 import 和 ?. 语法
  • 要么我们手动使用旧语法 require 和 if else
  • 要么我们利用 esbuild 自动把 TS 转译成旧语法

build 之后不加载 md 文件

这是因为 rollup 不支持 import() 时拼字符串
要么让它支持(不靠谱)
要么不要拼字符串