Rollup.js向导,入门指引
最直接的解释就是,Rollup
是前端模块化的一个打包工具,将模块文件根据命令或者根据rollup.config.js
配置文件将多个模块文件打包成一个文件,然后就可以通过HTML
的标签去导入这一个结果文件即可,从而使代码最小化,并且
Rollup
会自动过滤掉那些没有被使用过的函数或变量。
什么是模块?为何要使用模块?
模块其实就相当于一个js文件,让单一功能或者一个完整的功能集中到一个地方,当使用的时候直接引入该模块即可,从而不需要关心该模块中的函数是如何实现的,只需要关心该模块实现怎样的功能。
例如:(下面的代码示例演示了简单的模块使用)
// 导入模块内容,从模块文件中
import dictionary from './dictionary.js';
// 使用{}可实现同时导入多个元素
import { extractWords } from './string-utils.js';
// 这里用export将当前文件的该函数导出了,
// 其他文件同样可以通过上面的import方式来使用该模块的spellcheck函数
export default function spellcheck ( text ) {
// 这里调用了string-utils模块里的extractWords方法
var words = extractWords( text );
var mistakes = [];
words.forEach( function ( word ) {
// 这里使用了dictionary模块的dictionary方法
if ( !dictionary.contains( word.text ) ) {
mistakes.push({
start: word.start,
end: word.end,
suggestions: dictionary.getSuggestions( word.text )
});
}
});
// ... //
}
// PS: 上述方法,使用的是类似AMD的一次性导入方式,与CMD的使用时导入不同
-
通过上述方式的调用我们就不需要再关心dictionary
和string-utils
模块里的extractWrods
是怎么对文本进行处理的,以及dictionary
的数据又是从哪里来的,或者他们的实现原理以及用到的算法又是什么样的,我们只需要关心这些接口是干什么用的,如果出现问题我们该从哪里去定位。
安装Rollup,很简单,在保证机器安装了nodeJS和npm的基础上使用下面命令即可
npm install rollup --global # or
npm i rollup -gfor short
测试rollup,直接输入rollup命令,查看是否安装成功或者通过rollup --help / -h
rollup
创建Demo工程
mkdir -p my-rollup-project/src
cd my-rollup-project
创建入口文件:main.js
touch src/main.js
输入以下内容:
// 从foo模块导入foo变量
import foo from './foo.js';
// 创建并导出默认函数,即该函数导出时的函数名即该模块文件的文件名
// 这里是'main', 该方式采用的是ES6标准的模块'定义导出方式'
export default function () {
console.log( foo );
}
创建入口文件所依赖的的文件:foo.js
touch src/foo.js
包含以下内容:
export default 48; // ES6标准的定义导出方式
将main.js打包,直接输出
rollup src/main.js
将会输出以下内容:
var foo = 48;
function main () {
console.log( foo );
}
export default main;
将打包后的内容输出到指定文件,使用参数 -o 或者 –output
rollup src/main.js -o bundle.js
执行该命令之后,上面直接输出的内容将会出现在bundle.js文件中
并且还可以通过 -f 或者 –format命令指定输出的格式(-f cjs = commonJS, amd = AMD, …)
rollup src/main.js -o bundle.js -f cjs
通过指定 -f cjs 输出成commonJS的格式,将得到以下内容:
'use strict'
var foo = 48;
function main () {
console.log( foo );
}
module.exports = main;
使用打包后的bundle.js
通过’node’命令进入,node模式
node
// 这里通过require方式去引入模块
> var myBundle = require('./bundle.js');
> myBundle();
// 得出结果:48
rollup.config.js
,从而减少打包步骤这还是简单的例子,如果是比较大的工程通过命令去完成就显得有些繁琐了,因此我们可以通过创建和书写rollup的配置文件来减少操作步骤,并且有了配置文件还可以一劳永逸,不用每次都输入命令完成;
rollup.config.js
内容或书写格式
export default {
// 指定入口文件,即我们要打包成bundle.js的源文件
entry: './main.js',
// 指定要打包成什么格式,等同: rollup src/main.js -o bundle.js -f cjs中的'-f cjs'参数
format: 'cjs',
// 最后是指定输出文件,即命令中的'-o bundle.js'参数
dest: 'bundle.js'
}
配置文件书写好之后,在工程目录下就可以直接使用rollup -c
命令去完成之前通过多条命令才能完成的操作了
通过 -c
指定rollup命令使用的配置文件,如果不指定就会去使用rollup.config.js
默认配置,所以在没有修改默认配置文件的情况下可以直接使用下面这个命令去完成打包工作。
rollup -c
修改默认配置文件名,通过--config
指定
rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js
rollup-plugin-json
Rollup插件
通过rollup插件从JSON文件中导入数据(比如:package.json)
package.json包含内容,比如:(该项目的项目名称以及版本信息)
{
"name": "my-rollup-project",
"version": "1.0.0"
}
安装rollup的json插件, 这个一定要在项目目录下执行
npm install --save-dev rollup-plugin-json
或者简写:
npm i -D rollup-plugin-json
安装之后package.json内容会有变化,如下:
{
"name": "my-rollup-project",
"version": "1.0.0",
"devDependencies": {
"rollup-plugin-json": "^2.0.2"
}
}
使用json插件,在main.js里面就可以通过import去引入并使用package.json里面的数据了
// src/main.js
import { version } from "../package.json"
export default function () {
console.log( 'current version is ' + version );
}
修改配置文件rollup.config.js
,加入插件配置项
// 引入json插件
import json from 'rollup-plugin-json';
export default {
entry: 'src/main.js',
format: 'cjs',
// 以数组形式出现,且数组成员使用小括号,比如:[ json(), a(), b() ...]
plugins: [ json() ],
dest: 'bundle.js'
};
最后通过rollup -c
打包,得出:
'use strict'
var version = '1.0.0';
function main () {
console.log( 'current version is ' + version );
}
module.exports = main;
rollup-plugin-json
Babel插件,使用目前浏览器未支持的JS功能
安装Babel: npm i -D rollup-plugin-babel
添加到配置文件rollup.config.js
// 加载插件
import json from 'rollup-plugin-json';
import babel from 'rollup-plugin-babel';
export default {
entry: 'src/main.js',
format: 'cjs',
plugins: [ json(), babel() ],
dest: 'bundle.js'
};
在使用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;
总结
// 可以通过Babel插件来使用ES2015的那些还没有被广泛使用的新特性,Babel插件的使用步骤如下:
// 1. 安装
npm i -D rollup-plugin-babel
// 2. 在rollup配置文件中加载该插件,即在导出的默认配置的'plugins'属性中的数组中添加一项'babel()'
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
...
// json插件安装:npm i -D rollup-plugin-json
"plugins": [ babel(), json() ],
...
}
// 3. 创建并配置Babel的配置文件: src/.babelrc
{
"presets": [ "es2015-rollup" ] // 预设让rollup支持es2015
}
// 4. 由于预设中需要用到es2015-rollup,所以需要先安装Babel的这个插件
npm i -D babel-preset-es2015-rollup
// 5. 上述准备工作完成之后,就可以创建我们的工程模块文件了,并在其中可以使用ES2015新特性了,然后进行打包生成目标文件
// src/main.js
import { version } from '../package.json';
// ES2015新语法,声明变量,赋值中使用反引号,${}来引用模块中的变量
const message = `current version is ${version}`;
// 新的函数声明方式,等价于 export defualt function () { console.log( message ); }
export default () => console.log( message );
// 6. 最后进行打包得到最终目标文件:bundle.js
// 该命令会根据默认的 rollup.config.js文件中的配置信息进行打包
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;
npm
使用Rollup
创建npm-rollup
工程目录
mkdir -p npm-rollup-project/src
创建package.json,位置保存在工程根目录下即npm-rollup-project/
,保存配置信息以及其他数据等,可以预先设置一些属性
cd npm-rollup-project
touch package.json
并将想要的一些属性预设到package.json,比如:
{
"name": "npm-rollup-project",
"version": "1.0.0"
}
初始化,可以通过npm init
命令初始化,同时给package.json配置额外属性
npm init
配置完成后package.json
内容大致如下:
{
"name": "npm-rollup-project",
"version": "1.0.0",
"main": "index.js", // 主入口文件
"scripts": {
"test": "echo ...."
},
"keywords": "rollup", // 项目相关的关键字
"author": "lizc",
"license": "ISC",
"description": ""
}
准备工作完成之后,就可以开始给项目安装rollup
了
npm install --save rollup
创建入口文件,使用ES2015模块标准,同时可以使用ES2015的新特性
// src/main.js
import foo from './foo.js';
export default function () {
console.log( foo );
}
创建main.js
依赖文件foo.js
// src/foo.js
export default 45;
在package.json
中创建新的脚本
"scripts": {
// ... others
"build": "rollup src/main.js --output bundle.js"
}
运行package.json
中的build
脚本
npm run build
至此得到编译后并打包的脚本文件bundle.js
var foo = 45;
function main() {
console.log( foo );
}
export default main;
总结
// 使用npm进行模块化,打包步骤
// 1. 创建package.json配置文件,并初始化npm init,package.json内容将发生如下变化
{
"name": "...",
"version": "...",
"main": "..js",
"scripts": {
// 打包时需要运行的脚本,或其他脚本,比如:
"build": "rollup src/main.js --output bundle.js"
},
// 以及其他等配置信息
}
// 2. 给项目安装rollup,安装完成之后工程目录下就会有一个名为"node_modules"的目录
npm install --save rollup
// 3. 创建项目入口文件main.js,以及其依赖文件foo.js或其他项目所需文件
// 4. 在package.json中的"scripts"属性中编写,打包需要执行的命令,比如:
"scripts": {
"build": "rollup src/main.js --output bundle.js" // 脚本名字'build'可以根据需要取
}
// 5. 执行脚本中的命令,run后面的命令需要跟"scripts"中命令的名字相一致
npm run build