安装

yarn global add rollup
yarn add rollup-plugin-esbuild
yarn add rollup-plugin-vue
yarn add rollup-plugin-scss 
yarn add sass rollup-plugin-terser

配置

1. 创建 src/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';

2. 创建 rollup.config.js

// 请先安装 rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terser
// 为了保证版本一致，请复制我的 package.json 到你的项目，并把 name 改成你的库名
import esBuild from 'rollup-plugin-esbuild'  // 将 ts 转为 js
import vue from 'rollup-plugin-vue'          // 将 vue 转为 js
import scss from 'rollup-plugin-scss'        // 将 scss 转为 css
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser" // 丑化 js
export default {
  input: 'src/lib/index.ts',         // 输入目录
  output: {                           
    globals: {                       // 全局依赖、不打包
      vue: 'Vue'
    },
    name: 'Muji',                    
    file: 'dist/lib/muji.js',         // 输出目录
    format: 'umd',                    // umd 格式
    plugins: [terser()]               // 丑化 js
  },
  plugins: [
    vue({
      include: /\.vue$/,
    }),
    scss({ include: /\.scss$/, sass: dartSass }),
    esBuild({
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015'
    })
  ],
}

使用

• 运行 rollup -c

  上传到 npm

  1. 配置 package.json

  {
  "files": ["dist/lib/*"],      // 上传文件
  "main": "dist/lib/muji.js",   // 主文件
  }

  2. 使用官网源

  npm config get registry                               // 查看源
  npm config set registry https://registry.npmjs.org/   // 使用官方源
  // 淘宝源 https://registry.npm.taobao.org/

  3. 上传

  npm login
  npm publish
  npm logout  // 退出登录