rollup 开发vue组件库及umd SDK 问题总结

最新推荐文章于 2024-10-29 11:30:21 发布

原创

最新推荐文章于 2024-10-29 11:30:21 发布 · 6.5k 阅读

6 ·

CC 4.0 BY-SA版权

原创博文，共同进步，转载需备注作者和出处

文章标签：

#rollup #组件库

需求:构建vue组件库成为js sdk 浏览器直接运行

umd是通用格式,兼容各种环境

具体js规范可以看这篇 JS模块化总结

以下是rollup构建过程中遇到的各种问题

rollup开发依赖包(npm library)，解决引入外部依赖失败的有效方法

import nodePolyfills from 'rollup-plugin-node-polyfills';
  plugins: [
    vue(),
    nodePolyfills(),
]

(!) Missing global variable name

出现这个问题的原因是rollup通过external + output.globals来标记外部依赖，所以需要在配置文件的output输出配置属性中添加globals属性，指定与外部模块相对应的浏览器全局变量名称，如：

globals: {
    "vue": "vue" // 指明 global.vue 即是外部依赖 vue
}

要是按照以上配置后问题还没解决，还有一个可能是在引入组件或者自己写js模块时，没有使用相对路径引入，比如你想在 src/index.js 中引入组件 src/components/Test.vue：

// 应该这样引入
import Test from './components/Test.vue'
// 而不是
import Test from 'components/Test.vue'

(!) Unused external imports

(!) Circular dependencies

Unused external imports 这个问题是因为import了uglify但是没用，忽略
Circular dependencies 因为历史原因，库中有使用yss-biz这个alias，后面通过rollup-plugin-includepaths重新定义这个别名的指向，最终出现循环引用，忽略
this has been rewritten to undefined 这是因为库中写的代码不正确用了箭头函数然后还绑定了this，忽略
Unused external imports 这个是因为导入的内容没有使用，忽略

module is not defined

https://github.com/rollup/rollup/issues/2661

(!) `this` has been rewritten to `undefined`

https://stackoverflow.com/questions/61827807/svelte-i18n-svelte-rollup-compiler-warning-this-has-been-rewritten-to-unde

common.js 在plugin位置尽量在上面,作者本人的插件顺序如下

import path from 'path';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import vue from 'rollup-plugin-vue2';
// import vue from 'rollup-plugin-vue';
import postcss from 'rollup-plugin-postcss';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import commonjs from '@rollup/plugin-commonjs';
import alias from '@rollup/plugin-alias';

import css from 'rollup-plugin-css-only';

// PostCSS plugins
// import nested from 'postcss-nested';
// import simpleVars from 'postcss-simple-vars';
// import cssnext from 'postcss-cssnext';
// import cssna