Rollup从入门到入坑(1)

把代码从文件编译到命令行并没有任何用处,本节将通过Rollup的基本参数将代码编译到文件系统。

通过命令行编译

通过Rollup -h可以查看Rollup的基本参数以及使用方法,其中Usage: rollup [options] <entry file>为官方给出的基础编译命令。而如果要将代码编译到文件系统,仅需要-o(或--file)一个配置参数,为了能控制rollup的输出格式,我们还可以使用-f(或--format)参数,具体如下:

rollup -f es -o dist/bundle.js src/index.js

其中无配置参数的路径会被rollup识别为入口文件,强迫症也可以为入口文件配置-i(或--input)参数。
执行过后可以发现根目录下会生成dist/bundle.js文件,如此一来我们便可通过修改配置参数而得到我们想要的代码块,好的,Rollup就是这么简单,此贴终结,告辞!
emmm…,怎么感觉用了rollup之后更麻烦了。每次都要输入一长串配置参数和文件路径可不是程序员能忍受的事情,所以将配置写入文件是必不可少的。

通过配置文件编译

可以从基本参数中找到-c(或--config)配置项,该配置项用于指定配置文件,而其默认值为rollup.config.js
在根目录下创建该配置文件,那么问题来了,配置文件内部怎么写?当然是找文档,官方文档的基础配置项如下。稍作改动

// rollup.config.js
export default {
  input: 'src/main.js',// => 'src/index.js'
  output: {
    file: 'bundle.js',// => 'dist/bundle.js'
    format: 'cjs'
  }
};

然后在package.json中加入编译脚本,然后执行npm run build

...
"scripts": {
   "build": "rollup -c"
 },
 ...

此时bundle.js文件由es模块变成了cjs模块,内容如下

'use strict';

function hello(name) {
   console.log(`hello ${name}`);
}

hello('world');

好的,如此便可以通过npm命令来编译我们的代码块了,虽然依旧简陋,但是Rome was not built in a day.我们需要对配置文件进行不断的丰富和修改。从而使Rollup的功能逐步强大。

猜你喜欢

转载自blog.csdn.net/u010464354/article/details/104763209
今日推荐