在上篇文章我们简单实现了一个 jQuery 的基础结构，不过为了顺应潮流，这次咱把它改为模块化的写法，此举得以有效提升项目的可维护性，因此在后续也将以模块化形式进行持续开发。
模块化开发和编译需要用上 ES6 和 rollup，具体原因和使用方法请参照我之前的《冗余代码都走开——前端模块打包利器 Rollup.js 入门》一文。
本期代码均挂在我的github上，有需要的童鞋自行下载。
1. 基本配置
为了让 rollup 得以静态解析模块，从而减少可能存在的冗余代码，我们得用上 ES6 的解构赋值语法，因此得配合 babel 辅助开发。
在目录下我们新建一个 babel 配置“.babelrc”：
|
1 2 3 |
{ "presets": ["es2015-rollup"] } |
以及 rollup 配置“rollup.comfig.js”：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var rollup = require( 'rollup' ); var babel = require('rollup-plugin-babel'); rollup.rollup({ entry: 'src/jquery.js', plugins: [ babel() ] }).then( function ( bundle ) { bundle.write({ format: 'umd', moduleName: 'jQuery', dest: 'rel/jquery.js' }); }); |
其中入口文件为“src/jquery.js”，并将以 umd 模式输出到 rel 文件夹下。
别忘了确保已安装了三大套：
|
1 |
npm i babel-preset-es2015-rollup rollup rollup-plugin-babel |
后续咱们直接执行：
|
1 |
node rollup.config.js |
即可实现打包。
2. 模块拆分
从模块功能性入手，我们暂时先简单地把上次的整个 IIFE 代码段拆分为：
|
1 2 3 4 |
src/jquery.js //出口模块 src/core.js //jQuery核心模块 src/global.js //全局变量处理模块 src/init.js //初始化模块 |
它们的内容分别如下：
jquery.js：
|
1 2 3 4 5 6 7 8 |
import jQuery from './core'; import global from './global'; import init from './init'; global(jQuery); init(jQuery); export default jQuery; |
core.js：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var version = "0.0.1", jQuery = function (selector, context) { return new jQuery.fn.init(selector, context); }; 0cf751391528-5"> }; joy/p/5518442.html" target="_blank">冗余代码都走开——前端模块打包利器 Rollup.js 入门》一文。
本期代码均挂在我的github上，有需要的童鞋自行下载。 1. 基本配置 为了让 rollup 得以静态解析模块，从而减少可能存在的冗余代码，我们得用上 ES6 的解构赋值语法，因此得配合 babel 辅助开发。 在目录下我们新建一个 babel 配置“.babelrc”：
以及 rollup 配置“rollup.comfig.js”：
其中入口文件为“src/jquery.js”，并将以 umd 模式输出到 rel 文件夹下。 别忘了确保已安装了三大套：
后续咱们直接执行：
即可实现打包。 2. 模块拆分 从模块功能性入手，我们暂时先简单地把上次的整个 IIFE 代码段拆分为：
它们的内容分别如下： jquery.js：
core.js：
|
