rollup+es6最佳实践

最新推荐文章于 2025-09-15 23:16:12 发布

原创

最新推荐文章于 2025-09-15 23:16:12 发布 · 9.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#rollup #es6

本文介绍了如何使用Rollup.js进行模块打包，特别是针对ES6语法的最佳实践。通过讲解src目录中的文件结构，安装过程，以及不同格式的编译方法，如CommonJS和UMD，强调了Rollup.js的Tree-shaking特性，以实现更精简的打包结果。在配置编译过程中，提到了常见错误及解决方法，并提供了相关资源链接以便进一步学习。

简单说下rollup就是只将调用过的模块打包，做到尽量精简的打包。

使用webpack 1.X 版本是无法利用该特性来避免引入冗余模块代码的

webpack2 已经出来好几款 beta 版本了，同样也加上了对 Tree-shaking 的支持

1.src中的文件

jquery.js

// 出口
import init from './init';
init(jQuery);

export default jQuery;

init.js

var init = function(jQuery){
   
   
    jQuery.fn.init = function (selector, context, root) {
   
   
        if (!selector) {
            return this;
        } else {
            var elem = document.querySelector(selector);
            if (elem) {
                this[0] = elem;
                this.length = 1;
            }
            return this;
        }
    }; 
    jQuery.fn.init.prototype = jQuery.fn;
};

export default init;