一步一步DIY jQuery库2-使用es6模块化

本博文使用了rollup打包，这里同时提供了简明的搭建环境的说明，通过第一部分1.环境搭建就可以在本地配置搭建环境。有关rollup的详细安装使用说明可以查看我的另外一篇博客：《rollup + es6最佳实践》

我们首先把《一步一步DIY一个自己jQuery库1》的代码使用es6模块化的方式打包好

【注】所有代码挂在我的github上

1.搭建环境

1.1 目录结构

  - src
    + .babelrc
    + core.js
    + global.js
    + init.js
    + jquery.js
    + util.js
  bundle.js
  package.json
  rollup.config.dev.js
  test.html

• src是源代码文件夹，其中jquery.js是入口文件
• bundle是编译后的文件
• package.json是包管理文件
• rollup.config.dev.js是rollup的配置文件
• test.html是测试文件,引入<script src="bundle.js"></script>即可测试

1.2 npm安装

npm i rollup rollup-plugin-babel babel-preset-es2015-rollup --save-dev

1.3 使用配置编译

新建文件，文件名为rollup.config.dev.js

import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/jquery.js',
  format: 'umd',
  moduleName: 'jQuery',
  plugins: [babel() ],
  dest: 'bundle.js',
};

src中.babelrc

{
  presets: [
    ["es2015", { "modules": false }]
  ]
}

注意{ "modules": false }一定要有，否则一直报错
执行命令：rollup -c rollup.config.dev.js,就能得到编译后的文件bundle.js。这里使用的是【umd】的形式，这是jquery的发布版本的格式，当然还有其他的一些格式，amd / es6 / cjs / iife

2.打包

jquery.js

// 出口
import jQuery from './core';
import global from './global';
import init from './init';

global(jQuery);
init(jQuery);

export default jQuery;

core.js

var version = "0.0.1",
    jQuery = function(selector, context) {
   
        return new jQuery.fn.init(selector, context);
    };

jQuery.fn = jQuery.prototype = {
    jquery: version,
    constructor: jQuery,
    setBackground: function() {
   
        this[0].style.background = 'yellow';
        return this;
    },
    setColor: function() {
   
        this[0].style.color = 'blue';
        return this;
    }
};

jQuery.extend = jQuery.fn.extend = function() {
   
    var isObject = function(obj) {
   
        return Object.prototype.toString.call(obj) === "[object Object]";
    };
    var isArray = function(obj) {
   
        return Object.prototype.toString.call(obj) === "[object Array]";
    };
    var name, clone, copy, copyIsArray ,options, i = 1,
        length = arguments.length,
        target = arguments[0] || {},
        deep = false; //默认为浅复制

    if (typeof target === "boolean"<