当前位置：首页 > article >正文

Vue-cli之库模式以及模块化的魅力 - - 【UMD】

article 2024/11/1 7:25:58

脚本

打包

使用

拓展

CommonJS：

AMD：

UMD：

ESM：

今天在看组件库的项目中碰到了vue-cli中的库模式，一开始对这种模式比较陌生，怎么说呢，从package.json的script开始，一步步的揭开它神秘的面纱吧~~

脚本

vue-cli-service build --target lib --name myLib [entry]

vue-cli-service build ：打包；

--target lib ：选用库模式（一般组件库选用此模式）；

--name myLib ：打包到目标文件夹myLib（比如普通模式的dist）；

[entry] ：入口文件（这里一般是给别的项目使用的入口，没定义的话系统默认App.vue）

以上就是脚本的含义，有关于脚本方面的其他问题这篇文章就不做深入探讨，感兴趣的朋友可以去查阅下别的资料。

打包

像我们打包出来生成的是这些产物，当时的我也是不清楚common.js、umd.js和umd.min.js分别代表的是什么东西，然后别的项目怎么使用这些js呢？

使用

我们就是用的umd.min.js包

就像定义好的协议一样，遵守一定的规则就可以使用我们的组件库了！到目前为止，我们已经在新项目里拿到组件库里面的内容了。

至于前面提到的入口文件的使用（怎样使用组件库），那就是看大家的代码逻辑了。

拓展

产物中涉及到了umd，网上的文章也有很多提及，这里我也来总结一下，温故而知新。

CommonJS：

在js模块化发展历程上最早出现的就是CommonJS，大家一定也用过require/module.exports。它的思想就是把一个个的文件当成一个一个的模块进行分割，然后在模块之间通过require/module.exports进行互相调用形成一整个生态系统。到现在NodeJS还是在运用这种方式，因为这种同步的方式是非常适合他们，但在我们浏览器端就不行了，我们往往兼顾的是网络状态也就是异步才是我们的主基调。

AMD：

正因为如此，后来amd诞生了，它的出现正是解决同步的问题，让我们浏览器可以更适合。在RequireJS中我们经常看到，通过define/require的方式实现。现在这种方式用的比较少，大家可以酌情考虑自己的项目情况。

UMD：

它的出现就是为了兼容性，系统会判断当前支持什么环境从而选取哪种模块化方式

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    methods
    function a(){};    //    private because it's not returned (see below)
    function b(){};    //    public because it's returned
    function c(){};    //    public because it's returned

    //    exposed public methods
    return {
        b: b,
        c: c
    }
}));

兼容上面的CommonJS和AMD，很伟大。