基础环境

Vue 2.6.10

vue-cli

1. 增加一个最简易的组件

packages/components/chart/src/chart.vue

<template>
    <div class="title">封装图表组件</div>
</template>

<script>
    export default {
        name: 'MyChart',
        props: {}
    }
</script>

<style lang="less" scoped>
    .title {
        font-size: 2rem
    }
</style>

2. 导出MyChart组件

import MyChart from './src/chart';

MyChart.install = function(Vue) {
    Vue.component(MyChart.name, MyChart) // 添加全局组件MyChart
}

export default MyChart;

3. 入口文件, 实现按需引用和全局引用

packages/index.js

import RmChart from './components/chart/index.js';

const components = [
    RmChart
]

// 通过插件，全局注册组件
const install = function(Vue, opts = {}) {
    components.forEach(component => {
        Vue.component(component.name, component)
    })
}

export default {
    install, 
    RmChart
}

export {
    RmChart
}

4. package.json文件新增打包命令

"build:lib": "vue-cli-service build --target lib --name testCompontent packages/index.js --dest lib"

上述命令可以打包为umd和common。

5. 修改package.json中的入口文件

"main": "lib/testComponent.umd.js",
"module": "packages/index.js"

知识延伸： package.json中的module字段

package.json文件中的module字段提供符合ESM规范的模块入口。

6. 使用yarn link模拟yarn包发布

yarn link

yarn unlink 删除

7. 在另一个项目中引入该库并使用

yarn link testComponent

<template>
    <div>
        <my-chart></my-chart>
    </div>
</template>

<script>
import { MyChart } from 'testComponent';

export default {
    data() {
        return {}
    },
    components: {
        MyChart
    }

}
</script>

将vue依赖包放在peerDependencies中

"vue": "2.6.10",
"vue-template-compiler": "2.6.10"

使用rollup打包成esm

1. 安装rollup

yarn add rollup@^3.0.0

实际安装的版本为3.29.4。

2. 安装rollup-plugin-node-resolve，解决导入语句不能省略文件扩展名

相应报错： Rollup Error: Could not resolve "./src/chart"

安装命令： `yarn add rollup-plugin-node-resolve --dev`

插件配置如下：

const resolve = require('rollup-plugin-node-resolve')

plugins: [
    resolve({
        extensions: ['.vue']
    })
]

3. 安装rollup-plugin-vue，处理vue文件

相应报错：Rollup Error：Unexpected token（Note that you need plugins to import files that not JavaScript）

安装命令：

yarn add vue@2.6.10 vue-template-compiler@2.6.10 
yarn add rollup-plugin-vue@^5.1.9 --dev

插件rollup-plugin-vue依赖vue-template-compiler， 所以安装了vue和vue-template-compiler。

插件配置如下：

const resolve = require('rollup-plugin-vue')

plugins: [
   vue()
]

报错：（plugin vue） TypeError： Cannot read properties of undefined（reading ‘styles’）

这个报错是因为安装的rollup-plugin-vue插件版本高了。

⚠️ vue2和vue3项目所用的rollup-plugin-vue版本不一样，vue的编译器也不一样。

• vue2：rollup-plugin-vue^5.1.9 + vue-template-compiler
• vue3：rollup-plugin-vue^6.0.0 + @vue/compiler-sfc

ps：rollup-plugin-vue插件中已经集成了less、less-loader

4. 安装rollup-plugin-alis，处理路径别名

起因：import *** from '@/**' 这个语句导入的文件没有打包最终的js文件中

安装命令：yarn add rollup-plugin-alis --dev

插件配置如下：

const alis = require('rollup-plugin-alias')

plugins: [
    alis({
        entries: [
            {
                find: '@',
                replacement: path.resolve(__dirname, 'src')
            }
        ],
        resolve: ['.vue', '.js'] // 这里必须要加上，不加的话resolve的默认值为['.js']，rollup-plugin-alis插件会将所有的import文件都当成js文件，遇到vue文件也会再在后面加上.js
    })
]

5. 到此，rollup可以正常打包成esm了。

6. 优化：安装rollup-plugin-css-only，将css打包到单独的css文件中

安装命令：yarn add rollup-plugin-css-only --dev

插件配置如下：

const css = require('rollup-plugin-css-only')

plugins: [
    css({
        output: 'riskMonitorComponent.css'
    }),
    vue({
        css: false
    })
]

7. 优化：安装rollup-plugin-terser，压缩js文件

安装命令：yarn add rollup-plugin-terser --dev

插件配置如下：

const { terser } = require('rollup-plugin-terser')

plugins: [
    output: [
        {
            file: 'esm/testComponent.esm.js',
            format: 'esm'
        },
        {
            file: 'esm/testComponent.esm.min.js',
            format: 'esm',
            plugins: [ tserser() ]
        }
    ]
]