# Rollup

配置工具介绍

• Rollup 模块打包
• NPM 依赖管理
• Babel 代码转译
• 建立项目结构

# Rollup 模块打包

Rollup 是一个轻量、支持 Tree Shaking 的模块打包工具。在我们的项目中，会有很多项拆分出去的 JS 模块，这些模块方式可以帮助我们开发模块化，代码质量更高的代码。但是我们需要一种机制，把这些小的 JS 文件都打包成一个大的 JS 文件。 Rollup 打包的独特之处在于支持 Tree Shaking。

例如：

main.js

import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125

maths.js

// This function isn't used anywhere, so
// Rollup excludes it from the bundle...
export function square ( x ) {
  return x * x;
}

// This function gets included
export function cube ( x ) {
  // rewrite this as `square( x ) * x`
  // and see what happens!
  return x * x * x;
}

打包后：

bundle.js

'use strict';

// This function isn't used anywhere, so

// This function gets included
function cube ( x ) {
  // rewrite this as `square( x ) * x`
  // and see what happens!
  return x * x * x;
}

console.log( cube( 5 ) ); // 125

例如以上我们开发了一个 math.js 的模块，里面包含两个 square 平方 和 cube 立方的方法，但是我们在 main.js 实际上只使用了其 cube 的方法，在打包后的 bundle.js 中我们可以发现，我们只打包了其中的 cube 方法。只要我们引用并使用的方法，才会被打包到输出文件里面，正在做到按需打包。

# 配置

rollup.config.js

• src / dest 目录
• 常用插件

例如：

// babel 用于转译 ES6
import babel from 'rollup-plugin-babel';
// uglify 用于压缩
import uglify from 'rollup-plugin-uglify';

// 区分生成环境，如果是生产环境下，才压缩代码
const plugins = [babel()]
if(process.env.NODE_ENV === 'production') plugins.push(uglify())

export default {
  entry: 'src/app/index.js', // 入口位置
  dest: 'dist/bundle.js',    // 输出位置
  format: 'iife',            // 代码格式
  moduleName: 'helloMVC',    // 打包名称
  plugins                    // 使用插件
};

# NPM 依赖管理

• NPM 常用字段
• NPM Script 配置
• 依赖配置
• pusblish 流程

# NPM 常用字段

• name // 项目名称
• version // 版本号
• description // 描述
• main // 使用的入口
• author // 作者
• repository // 仓库地址
• license // 协议

# NPM Script 配置

例如：

{
  "script": {
    "dev" : "cross-env NODE_ENV=dev rollup -c --watch",
    "build" : "cross-env NODE_ENV=production rollup -c",
    "example" : "http-server . -s -p 10008"
  }  
}

这样，我们可以按照命名约定运行一下命令

npm run dev
npm run build
npm run example

实际对应运行以下命令

# npm run dev
cross-env NODE_ENV=dev rollup -c --watch
# npm run build
cross-env NODE_ENV=production rollup -c
# npm run example
http-server . -s -p 10008

# 依赖配置

通过 npm install 设置，在 package.json 中体现

• dependencies 在任何环境下安装都需要用到的依赖 ，通过 npm install --save 添加
• devDependencies 在开发环境下用到的依赖，通过 npm install --save-dev 添加
• peerDependencies 使用需要的依赖，例如生态包

# Babel 代码转译

知识点

• JS 转译机制
• core/preset/plugin 概念
• .balelrc
• Rollup 中的使用配置

在目前ES6引入了很多新的特性，但浏览并不能直接支持运行。通过 Babel 将新版本的ES6代码，转换成为 ES5 代码，这样就可以在浏览器上使用。Babel 的库非常大，基础的转译功能在 core 库中体现。plugin 的库是 Babel 的插件，我们可以按需的添加你想要的代码转译功能。但 plugin 可能会非常的多，这个时候就有一个 preset 的概念，他会自动帮你整合好你需要那些的 plugin 。这些整理后的配置，都会体现在根目录的 .babelrc 文件里面。

# 项目结构

项目中的目录结构介绍

• package.json // 包管理文件
• .gitignore // 设置不提交的代码文件
• .babelrc // Babel使用管理文件
• LICENSE // 协议文件
• README.md // 项目说明文件
• src // 开发环境目录
• dist // 生产环境目录
• examples // 事例项目

# 参考

• rollup.js
• Babel