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

Myth丶恋晨 2021-09-25 04:00 362阅读 0赞

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

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

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

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

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

![image.png][]

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

### (!) Missing global variable name ###

![image.png][image.png 1]

出现这个问题的原因是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

![image.png][image.png 2]

(!) Circular dependencies

![image.png][image.png 3]

*  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

*![image.png][image.png 4]*

[https://github.com/rollup/rollup/issues/2661][https_github.com_rollup_rollup_issues_2661]

![image.png][image.png 5]

![image.png][image.png 6]

![image.png][image.png 7]

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

![image.png][image.png 8]

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

![image.png][image.png 9]

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 cssnano from 'cssnano';
    import esbuild from 'rollup-plugin-esbuild'; // plugin-esbuild将ts变为js
    
    const env = process.env.NODE_ENV;
    const resolveFile = function(filePath) {
      return path.join(__dirname, '..', filePath);
    };
    // const Global = `var Vue__default =_interopDefaultLegacy(Vue)`;
    // 插件
    const plugins = [
      vue({
        css: true,
        compileTemplate: true,
        include: /\.vue$/,
        target: 'browser',
      }),
      // css(),
      nodeResolve({
        preferBuiltins: true,
        browser: true,
        jsnext: true,
        main: true,
      }),
      commonjs(),
      nodePolyfills(),
      globals(),
      replace({
        'process.env.NODE_ENV': JSON.stringify(env),
        'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG),
      }),
      postcss({
        modules: false,
        extensions: ['.less', '.css', '.scss'],
        // plugins: [nested(), simpleVars(), cssnext({ warnForDuplicates: false }), cssnano()],
      }),
      builtins(),
      json(),
      babel({
        exclude: 'node_modules/**',
        runtimeHelpers: true,
      }),
    ];
    export default [
      //  多出口入口
      {
        input: './src/packages/index.js',
        // external: ['vue'], // 不打包
        output: [
          {
            file: './example/h5/dist/cloudCall.umd.js',
            name: 'cloudCall',
            format: 'umd', // 支持amd和common.js规范window.Vue
            sourcemap: true, // es->es6
            globals: {
              vue: 'Vue',
              jquery: '$',
              axios: 'axios',
            },
          },
        ],
    
        plugins: [
          ...plugins,
    
          // terser()
        ],
      },
    ];

![image.png][image.png 10]

[https://github.com/vueComponent/ant-design-vue/issues/2745][https_github.com_vueComponent_ant-design-vue_issues_2745]

![image.png][image.png 11]

npm uninstall babel-plugin-import

WARNING (@babel/preset-env): We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.
    
    You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:
    
      npm install --save core-js@2    npm install --save core-js@3
      yarn add core-js@2              yarn add core-js@3

警告(@babel/pre -env):我们注意到你使用了' useBuiltIns '选项而没有声明一个core-js版本。目前，我们假设版本2。x表示没有通过任何版本。因为这个默认版本可能会在Babel的未来版本中改变，我们建议通过“corejs”选项显式设置你正在使用的core-js版本。
    您还应该确保传递给“corejs”选项的版本与“包”中指定的版本匹配。json的“依赖性”部分。如果没有，则需要运行以下命令之一:
    npm install——save core-js@2 npm install——save core-js@3
    yarn add core-js@2 yarn add core-js@3

![image.png][image.png 12]

这个错误定位后发现与rollup-plugin-uglify插件有关，rollup-plugin-uglify不能压缩es6的代码文件。rollup-plugin-uglify的[官方文档][Link 1]是说

> Note: uglify-js is able to transpile only es5 syntax. If you want to transpile es6+ syntax use terser instead

顺着这个思路有两种解决方法，一只要把es6的代码用babel转换成es5即可。二使用[rollup-plugin-terser][]插件代替rollup-plugin-uglify

安装rollup-plugin-terser

yarn add rollup-plugin-terser --dev

使用rollup-plugin-terser

import { rollup } from "rollup";
    import { terser } from "rollup-plugin-terser";
    rollup({
      input: "main.js",
      plugins: [terser()]
    });

antd 组件源码错误

![image.png][image.png 13]

![image.png][image.png 14]

switch (e) {
                case 'fill':
                  return c + '-fill';
                case 'outline':
                  return c + '-o';
                case 'twotone':
                  return c + '-twotone';
                default:
                  throw new TypeError('Unknown theme type: ' + e + ', name: ' + c);
              }

[https://github.com/ant-design/ant-design/issues/19002][https_github.com_ant-design_ant-design_issues_19002]

![image.png][image.png 15]

注释掉message组件问题消失

![image.png][image.png 16]

![image.png][image.png 17]

default.observable

![image.png][image.png 18]

[https://github.com/59naga/babel-plugin-add-module-exports\#readme][https_github.com_59naga_babel-plugin-add-module-exports_readme]

![image.png][image.png 19]

# Vue.observable小型状态管理 #

[https://www.jianshu.com/p/b02d4693c40d][https_www.jianshu.com_p_b02d4693c40d]

![image.png][image.png 20]

![image.png][image.png 21]

index.umd.js:1 Uncaught ReferenceError: require is not defined

rollup开发依赖包（npm library）实战

[https://www.jianshu.com/p/2872fbaeb35b][https_www.jianshu.com_p_2872fbaeb35b]

# 本地开启https服务  ===>  [https://codecat.blog.csdn.net/article/details/113634604][https_codecat.blog.csdn.net_article_details_113634604] #

安装最新版rollup

[http://www.voidcn.com/article/p-yjriqqee-bqu.html][http_www.voidcn.com_article_p-yjriqqee-bqu.html]

![image.png][image.png 22]

index.umd.js:1 Uncaught TypeError: Cannot read property 'withScopeId' of undefined

关于Rollup编译vue的插件

npm i -D vue-template-compiler   vue-loader rollup-plugin-vue  babel-plugin-transform-vue-jsx

![image.png][image.png 23]

在使用Babel去编译代码之前需要进行一些配置，该配置文件需要在src/目录下创建
    
    touch src/.babelrc
    
    内容：
    
    {
        "presets": ["es2015-rollup"]
    }
    
    
    在经过上一步配置之后，还需要安装一下babel-preset-es2015-rollup
    
    npm i -D babel-preset-es2015-rollup
    
    上述步骤完成之后我们就可以在文件中使用ES2015特性了，如：
    
    // src/main.js
    import { version } from '../package.json';
    
    const message = `current version is ${version}`;
    
    export default () => console.log( message );
    
    最后使用rollup -c打包得出以下结果：
    
    // bundle.js
    'use strict';
    
    var version = '1.0.0';
    
    var message = 'current version is ' + version;
    
    var main = (function () {
        console.log( message );
    });
    
    module.exports = main;

上面 es-2015配置仅供参考,如下是实际使用配置

presets: [
        [
          '@babel/preset-env',
          {
            debug: false, // debug，编译的时候 console
            useBuiltIns: 'usage', // 按需加载
            modules: false, // 模块使用 es modules ，不使用 commonJS 规范
            targets: {
              node: 'current', // 根据当前节点版本进行编译
            },
          },
        ],
      ],

[https://blog.csdn.net/gccll/article/details/52785754][https_blog.csdn.net_gccll_article_details_52785754]

![image.png][image.png 24]

![image.png][image.png 25]

![image.png][image.png 26]

Cannot read property 'extend' of undefined

npm install --save-dev rollup-plugin-clear

![image.png][image.png 27]

![image.png][image.png 28]

![image.png][image.png 29]

在利用webpack的Vue项目中，在main.js中使用import Vue from 'vue' 导入的Vue的包，功能不完善，只是提供了runtime-only的方式，并没有提供像在普通网页中使用Vue那样的功能完善。

**包的查找规则**

（1）在项目根目录中查找有没有node\_modules 的文件夹

（2）在node\_modules 中，根据包名，找对应的vue文件夹

（3）在vue文件夹中，找一个叫做package.json的包配置文件

（4）在package.json文件中，查找一个main属性【main属性指定了这个包在被加载的时候  的入口文件】

因为在Vue包的package.json文件中main属性指定的入口文件【"main": "dist/vue.runtime.common.js",】，因此，在main.js中使用import Vue from 'vue' 导入的Vue构造函数，功能不完善。

**解决办法：**

（1）import Vue from '../node\_modules/vue/dist/vue.js'

（2）在Vue包的package.json文件中main属性指定的入口文件修改为【"main": "dist/vue.js",】

（3）在项目的webpack.config.js中添加resolve属性

1.     resolve: {
    2. alias: {
    3. // 修改Vue倍导入时包的路径
    4. "vue$" : "vue/dist/vue.js"
    5.         }
    6.

[https://blog.csdn.net/sleepwalker\_1992/article/details/82082400][https_blog.csdn.net_sleepwalker_1992_article_details_82082400]

vant 编译有问题 内部引用vue runtime

import aLiCallPlugin from "./aLiCall";
    import tianRunCallPlugin from "./tianRunCall";
    const version = "1.0.0";
    const components = [aLiCallPlugin, tianRunCallPlugin];
    const install = Vue => {
      const localVue = Vue;
      if (install.installed) return;
      components.forEach(component => {
        localVue.component(component.name, component);
      });
      localVue.prototype.$aLiCallPlugin = aLiCallPlugin;
      localVue.prototype.$tianRunCall = tianRunCallPlugin;
    };
    
    // 判断是否是直接引入文件
    if (typeof window !== "undefined" && window.Vue) {
      install(window.Vue);
    }
    
    export { version, install, aLiCallPlugin, tianRunCallPlugin };

### 下部分Css模块配置暂未更新,可以做到支持 ###

### rollup 不支持 css scoped ###

const \_withId = /\*\#\_\_PURE\_\_\*/vue$1.withScopeId("data-v-88776a9e");

vant源码有报错

![image.png][image.png 30]

组件中尽量用vue 运行时 即使用 vue.common.runtime.js

![image.png][image.png 31]

![image.png][image.png 32]

![image.png][image.png 33]

[https://stackoverflow.com/questions/53773128/vuejs-cannot-read-property-use-of-undefined-error][https_stackoverflow.com_questions_53773128_vuejs-cannot-read-property-use-of-undefined-error]

![image.png][image.png 34]

出问题的地方在 babel的core-js，这个包里面使用有一个有一个判断优先级调整一下就好

解决参考文章 [https://blog.csdn.net/qq\_27667337/article/details/90634305][https_blog.csdn.net_qq_27667337_article_details_90634305]

代码地址node\_modules/core-js/client/core.js

原代码

// Node.js
      if (isNode) {
        notify = function () {
          process.nextTick(flush);
        };
      // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339
      } else if (Observer && !(global.navigator && global.navigator.standalone)) {
        var toggle = true;
        var node = document.createTextNode('');
        new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new
        notify = function () {
          node.data = toggle = !toggle;
        };
      // environments with maybe non-completely correct, but existent Promise
      } else if (Promise && Promise.resolve) {
        // Promise.resolve without an argument throws an error in LG WebOS 2
        var promise = Promise.resolve(undefined);
        notify = function () {
          promise.then(flush);
        };
      // for other environments - macrotask based on:
      // - setImmediate
      // - MessageChannel
      // - window.postMessag
      // - onreadystatechange
      // - setTimeout
      } else {
        notify = function () {
          // strange IE + webpack dev server bug - use .call(global)
          macrotask.call(global, flush);
        };
      }

修改后的代码

if (isNode) {
        notify = function () {
          process.nextTick(flush);
        };
      // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339
      } else if (Promise && Promise.resolve) {
        // Promise.resolve without an argument throws an error in LG WebOS 2
        var promise = Promise.resolve(undefined);
        notify = function () {
          promise.then(flush);
        };
      // for other environments - macrotask based on:
      // - setImmediate
      // - MessageChannel
      // - window.postMessag
      // - onreadystatechange
      // - setTimeout
      } else if (Observer && !(global.navigator && global.navigator.standalone)) {
        var toggle = true;
        var node = document.createTextNode('');
        new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new
        notify = function () {
          node.data = toggle = !toggle;
        };
        // environments with maybe non-completely correct, but existent Promise
      } else {
        notify = function () {
          // strange IE + webpack dev server bug - use .call(global)
          macrotask.call(global, flush);
        };
      }

安装必要的PostCSS插件。

在项目里，会使用到四个插件 - 两个是语法糖，一个用来在兼容旧浏览器的新CSS特性，一个用来压缩，减少生成的样式文件大小。

*  `postcss-simple-vars` — 可以使用Sass风格的变量(e.g. `$myColor: #fff;`，`color: $myColor;`)而不是冗长的CSS语法(e.g. `:root {--myColor: #fff}`，`color: var(--myColor)`)。这样更简洁；我更喜欢较短的语法。
 *  `postcss-nested` — 允许使用嵌套规则。实际上我不用它写嵌套规则；我用它简化[BEM友好的选择器][BEM]的写法并且划分我的区块，元素和修饰到单个CSS块。
 *  `postcss-cssnext` — 这个插件集使得大多数现代CSS语法([通过最新的CSS标准][CSS])可用，编译后甚至可以在不支持新特性的旧浏览器中工作。
 *  `cssnano` — 压缩，减小输出CSS文件大小。相当于JavaScript中对应的UglifyJS。

使用这个命令安装插件：

> npm install --save-dev postcss-simple-vars postcss-nested postcss-cssnext cssnano

按需加载

![image.png][image.png 35]

![image.png][image.png 36]

rollup-plugin-vue 插件最新版会将模板编译成vue3源码语法,出现大量undefined情况 ,初步估计插件不完整(据官方:vue3是兼容vue2语法的)

使用[rollup-plugin-vue2][] 解决vue2 rollup编译问题

结论:使用ui组件库 等第三方组件库 需要熟悉源码避免选择无法编译完整的框架  element可以直接编译成功 (因为其组件写法遵循import方式引入,vant,antd-vue稍微不一样)

以上仅记录开发sdk中的问题,实战开发组件库和sdk构建细节待更新~~~

vue cli 开发组件库待更新~~~

wepack开发组件库及umd待更新~~~

构建原理梳理待更新~~~

[JS]: https://blog.csdn.net/qq_37939251/article/details/113591982
[image.png]: /images/20210923/35232c17ed484f548117264914e69474.png
[image.png 1]: /images/20210923/b954d27cb6324af9a5bf82758e9f063d.png
[image.png 2]: /images/20210923/612f9d1a1ea64354bfbd8d5e60c9300d.png
[image.png 3]: /images/20210923/a573e9ac551f4e1bab8789579e1f2af7.png
[image.png 4]: /images/20210923/87bcecd9fd244cb58714e2c890c094b2.png
[https_github.com_rollup_rollup_issues_2661]: https://github.com/rollup/rollup/issues/2661
[image.png 5]: /images/20210923/40c52d95407445ca8ea4f584e523c13c.png
[image.png 6]: /images/20210923/5c294ee3f0cf4926a103b6b357e7286c.png
[image.png 7]: /images/20210923/dff85026ecc84187bc3ae36717085a82.png
[image.png 8]: /images/20210923/9f32e76816e14f31b19707d3a4592b45.png
[https_stackoverflow.com_questions_61827807_svelte-i18n-svelte-rollup-compiler-warning-this-has-been-rewritten-to-unde]: https://stackoverflow.com/questions/61827807/svelte-i18n-svelte-rollup-compiler-warning-this-has-been-rewritten-to-unde
[image.png 9]: /images/20210923/95a5986ab8cb4b29851212f862de5896.png
[image.png 10]: /images/20210923/c5d2194ea15b47e4ab002dbb6ffb6546.png
[https_github.com_vueComponent_ant-design-vue_issues_2745]: https://github.com/vueComponent/ant-design-vue/issues/2745
[image.png 11]: /images/20210923/8522270f05874a738a0016fc2229a3d0.png
[image.png 12]: /images/20210923/9766693b0cd744539754eaf42e56a524.png
[Link 1]: https://github.com/TrySound/rollup-plugin-uglify
[rollup-plugin-terser]: https://github.com/TrySound/rollup-plugin-terser
[image.png 13]: /images/20210923/24a18f2dd67642b88e124a8441c9698c.png
[image.png 14]: /images/20210923/f925864beb8344dabf57876777a4a24d.png
[https_github.com_ant-design_ant-design_issues_19002]: https://github.com/ant-design/ant-design/issues/19002
[image.png 15]: /images/20210923/26c707d8c3bc4e16b9462cf58de2fa0f.png
[image.png 16]: /images/20210923/5201b26e57e04286ad46042cec1f605a.png
[image.png 17]: /images/20210923/b797ad8adb13452c9792b60cad9c4b99.png
[image.png 18]: /images/20210923/0046def5d62347768b473b97503f23a9.png
[https_github.com_59naga_babel-plugin-add-module-exports_readme]: https://github.com/59naga/babel-plugin-add-module-exports#readme
[image.png 19]: /images/20210923/554b98da6b084c749cd77afa70dc9639.png
[https_www.jianshu.com_p_b02d4693c40d]: https://www.jianshu.com/p/b02d4693c40d
[image.png 20]: /images/20210923/c58d43276a8f4bf9b313f0bd33365877.png
[image.png 21]: /images/20210923/137e5e62aff945428e1ae05d462feafe.png
[https_www.jianshu.com_p_2872fbaeb35b]: https://www.jianshu.com/p/2872fbaeb35b
[https_codecat.blog.csdn.net_article_details_113634604]: https://codecat.blog.csdn.net/article/details/113634604
[http_www.voidcn.com_article_p-yjriqqee-bqu.html]: http://www.voidcn.com/article/p-yjriqqee-bqu.html
[image.png 22]: /images/20210923/14c45a904c7f4b4d821920242cb6732d.png
[image.png 23]: /images/20210923/cadc82a51d614c75bac7a0502eabb780.png
[https_blog.csdn.net_gccll_article_details_52785754]: https://blog.csdn.net/gccll/article/details/52785754
[image.png 24]: /images/20210923/627ca65e071248d298460523de4f2efa.png
[image.png 25]: /images/20210923/d59ab78c6dcc42ea970aa193c5d3270f.png
[image.png 26]: /images/20210923/08ec16685fe5491a83374512799efe89.png
[image.png 27]: /images/20210923/84b6f1cc7a9b409c9959d746b9e257e5.png
[image.png 28]: /images/20210923/c6caa68e27704ad4811cd9838af73f5e.png
[image.png 29]: /images/20210923/54f2946963b54fa9bba95ed873014deb.png
[https_blog.csdn.net_sleepwalker_1992_article_details_82082400]: https://blog.csdn.net/sleepwalker_1992/article/details/82082400
[image.png 30]: /images/20210923/a07d086d04b4451c923f11d3eb2cb7bc.png
[image.png 31]: /images/20210923/72fe279b4d284f19a944be8739cf942c.png
[image.png 32]: /images/20210923/505b0f37649f430e9aa26fae19760090.png
[image.png 33]: /images/20210923/fa904f3cc1dd44d1a065144796943d38.png
[https_stackoverflow.com_questions_53773128_vuejs-cannot-read-property-use-of-undefined-error]: https://stackoverflow.com/questions/53773128/vuejs-cannot-read-property-use-of-undefined-error
[image.png 34]: /images/20210923/0fac3c6890f940249428700d7bcf139b.png
[https_blog.csdn.net_qq_27667337_article_details_90634305]: https://blog.csdn.net/qq_27667337/article/details/90634305
[BEM]: http://getbem.com/naming/
[CSS]: https://www.w3.org/Style/CSS/current-work
[image.png 35]: /images/20210923/e0770a274d56409f836cba3b4f5ca798.png
[image.png 36]: /images/20210923/ca3fa0e7072a4da495c243d5e77b9c14.png
[rollup-plugin-vue2]: https://github.com/skyplaying/rollup-plugin-vue2