如何使用rollup构建一个支持es6的环境？

准备工作

在项目开始之前，需要安装rollup的依赖。

npm i -D rollup @babel/core @babel/preset-env rollup-plugin-babel

在这里，分别对上面的依赖进行简单的说明：

• rollup：JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码
• @babel/core：把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理
• @babel/preset-env：是一个智能预设，可以使用最新的es6/7语法，不用关心目标的环境
• rollup-plugin-babel：将rollup和babel进行了完美结合

编写rollup配置文件

创建入口文件

既然要构建一个可以运行es6语法的环境，就需要一个入口的文件。我在根目录下，建立一个src的目录，且在该目录下创建一个index文件。

然后在这个文件里面编写一点简单的es6的代码，以方便rollup打包。

let a = 1;
console.log(a);
export default a;

配置文件的编写

在根目录下创rollup.config.js文件。在该文件中我们一般会配置如下内容：

• input： 入口文件地址
• output： 输出文件的配置项
  • umd： 支持amd和commojs规范
  • name： 打包后的名字
  • file： 打包的目录
  • sourcemap：打包后，做代码映射，根据es5找到es6代码
• plugins：插件，最常见的就是对babel进行配置

具体代码如下：

import babel from 'rollup-plugin-babel';
export default {
    input: './src/index.js',
    output: {
        format: 'umd',
        name: 'Vue',
        file: 'dist/vue.js',
        sourcemap: true
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        })
    ]
}

babel的配置

在rollup中的babel的预设不像webpack可以直接写在配置文件里，而还是得独立写个“.babelrc”。

所以就需要在根目录下新建一个.babelrc的文件。

babelrc中，需要配置一系列的插件，插件的集合称作预设。babel打包的时候需要通过预设进行解析。

具体文件内容如下：

{
    "presets": [
        "@babel/preset-env"
    ]
}

运行打包

最后，在package.json中添加运行的脚本。

"scripts": {
    "serve": "rollup -c -w"
},

然后执行命令：npm run serve，就会看到下面的界面：

此时，index.js的文件就打包完成了。根目录下将会出现一个dist目录。

到此为止，一个建议的支持es6的打包环境就配置完成了。