Vue 3.0组件库初始化

Posted 2020-12-13 yichu

该项目使用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‘]
}