欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 3.0组件库初始化

程序员文章站 2022-07-13 22:45:16
...

该项目使用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']
}
相关标签: Vue vue.js