Vue 3.0組件庫初始化

該項目使用rollup.js進行打包

新建一個空文件夾后，進入進行項目初始化

npm init -y

全局安裝rollup.js

npm i rollup -g

安裝組件庫相關的插件

• rollup-plugin-node-resolve 集成外部模塊，解決插件依賴問題
• babel-node @babel/core ，讓代碼能夠在node環境里運行es6語法
• rollup-plugin-commonjs 讓代碼支持common.js語法
• rollup-plugin-babel 讓代碼支持es6語法
• rollup-plugin-json 支持json模塊
• rollup-plugin-terser 壓縮代碼

vue 的相關插件

• rollup-plugin-vue
• rollup-plugin-postcss
• @vue/compiler-sfc 支持vue3.0語法
• sass

創建.babelrc 文件后
安裝 @babel/preset-env

{
  "presets": [
    "@babel/env"
  ]
}

package.json文件

{
  "name": "libs-dev",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rollup -wc rollup.config.dev.js",
    "build": "rollup -c rollup.config.dev.js",
    "build:prod": "rollup -c rollup.config.prod.js"
  },
  "keywords": [],
  "author": "奕初",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@vue/compiler-sfc": "^3.0.0-beta.15",
    "rollup": "^2.18.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-postcss": "^3.1.2",
    "rollup-plugin-terser": "^6.1.0",
    "rollup-plugin-vue": "^6.0.0-beta.6",
    "sass": "^1.26.9"
  }
}

創建rollup.config.dev.js進行相應配置

const path = require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')

const inputPath = path.resolve(__dirname, './src/index.js')
const outputUmdPath = path.resolve(__dirname, './dist/index.js')
const outputEsPath = path.resolve(__dirname, './dist/index.es.js')

module.exports = {
  input: inputPath,
  output: [{
    file: outputUmdPath,
    format: 'umd', //編譯模式
    name: 'datav',
    globals: {
      vue: 'vue'
    }
  }, {
    file: outputEsPath,
    format: 'es',
    globals: {
      vue: 'vue'
    }
  }],
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**'
    }),
    json(),
    vue(),
    postcss({
      plugins: []
    })
  ],
  external: ['vue']
}