The project is packaged using rollup.js

After creating an empty folder, proceed to project initialization

npm init -y
Copy the code

Rollup.js is installed globally

npm i rollup -g
Copy the code

Install plug-ins related to the component library

  • Rollup-plugin-node-resolve Integrates external modules to resolve plug-in dependencies
  • Babel-node @babel/core, which allows code to run es6 syntax in the Node environment
  • Rollup-plugin-commonjs enables code to support common.js syntax
  • Rollup-plugin-babel enables code to support ES6 syntax
  • Rollup-plugin-json Json modules are supported
  • Rollup-plugin-terser compression code

Vue related plug-ins

  • rollup-plugin-vue
  • rollup-plugin-postcss
  • @vue/ Compiler – The SFC supports the VUe3.0 syntax
  • sass

Create the. Babelrc file and install @babel/preset-env

{
  "presets": [
    "@babel/env"]}Copy the code

Package. The json file

{
  "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": At the beginning of the "yi"."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.10.3"."@babel/preset-env": "^ 7.10.3"."@vue/compiler-sfc": 15 "" ^ 3.0.0 - beta.."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 "" ^ 6.0.0 - beta.."sass": "^ 1.26.9"}}Copy the code

Create rollup.config.dev.js and configure it accordingly

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'.// Compile mode
    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']}Copy the code