rollup-plugin-includepaths rollup插件管理// from src/lib/one/foo

rollup-plugin-includepaths
从npm中查看使用方式
Let you use relative paths in your import directives, like this:

// from src/lib/one/foo.js
import { Foo } from ‘one/foo’;

// from src/other/two/bar.js
import { Bar } from ‘two/bar’;

Setup
In your rollup configuration file:

import includePaths from ‘rollup-plugin-includepaths’;

let includePathOptions = {
include: {},
paths: [‘src/lib’, ‘src/other’],
external: [],
extensions: [’.js’, ‘.json’, ‘.html’]
};

export default {
entry: ‘./app.js’,
format: ‘cjs’,
dest: ‘public/app.min.js’,
plugins: [ includePaths(includePathOptions) ],
};

Options:
paths = [’’]
An array of source paths in your project where the plugin should look for files

Example: [‘src/lib’, ‘src/foo’]

By default, resolve files from working dir

include
A map of module=>path/to/file.js with custom module paths. Used to override the search with a static path (like Browserify does with the “browser” config).

Use this option if you want to skip the file resolution and directly resolve a module name to a given path.

Example:

include: {
// Import example: import angular from ‘angular’;
‘angular’: ‘bower_components/angular/angular.js’
}
external
An array of module names that should be excluded from the bundle (external modules).

By default, all the node built-in modules will be marked as external.

To include the built-ins, you can use the builtins plugin and set this config to an empty array.

Example:

// will not include the module ‘angular’ in the final bundle
external: [‘angular’]
extensions
An array of file extensions to look for in the project.

Default: [’.js’, ‘.json’]

备注：

Rollup快速上手

安装rollup模块yarn add rollup --dev
在node_modules/.bin目录就会有rollup.cmd，通过yarn rollup就可以直接使用
yarn rollup .\src\index.js --format iife --file dist/bundle.js指定打包格式为iife，并指定打包文件

打包结束，输出打包结果到bundle.js中

(function () {
  'use strict';

  const log = msg => {
    console.log('---------- INFO ----------');
    console.log(msg);
    console.log('--------------------------');
  };

  var messages = {
    hi: 'Hey Guys, I am zce~'
  };

  // 导入模块成员

  // 使用模块成员
  const msg = messages.hi;

  log(msg);

}());

可以看出，代码中未使用的代码会被自动清除，因为Rollup默认开启tree-shaking，如果用webpack，虽然可以实现tree-shaking，但需要配置并且打包的代码非常臃肿

Rollup配置文件

项目根目录添加rollup.config.js，如下

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js', // rollup支持的多种输出格式(有amd,cjs, es, iife 和 umd)
    format: 'iife',
  },
}

可以通过yarn rollup --config直接运行默认配置文件，也可以指定文件yarn rollup --config rollup.config.js，这样可以针对不同的环境使用不同的配置

Rollup使用插件

Rollup支持使用插件的方式，并不像webpack中分为loader、plugins和minimize三种扩展方式，插件时Rollip唯一扩展途径

rollup-plugin-json插件
1. 安装yarn add rollup-plugin-json --dev
2. rollup.config.js中通过esm模式引入，import json from 'rollup-plugin-json'，并添加到plugins中
3. 在index.js中获取json文件中的字段，import { name, version } from '../package.json'
4. 打包结果如下
  
  **
```
(function () {
    ...
    var name = "01-getting-started";
    var version = "0.1.0";

    log(name);
    log(version);
    ...
}());
```
加载Npm模块

Rollup不能像Webpack一样，直接使用模块的名称导入第三方模块，需要使用rollup-plugin-node-resolve

安装和使用同rollup-plugins-json插件一样，安装成功后导入lodash模块，Rollup默认处理esm模式的打包，所以需要导入import _ from 'lodash-es'，使用console.log(_.camelCase('hello world'))，打包结果如下

**
```
(function () {
    ...
    console.log(lodash.camelCase('hello world'));
    ...
}());
```
加载CommonJS模块

Rollup设计只处理ESModule的打包，导入CommonJS模块是不支持的；需使用rollup-plugin-commonjs
1. 创建cjs-module.js文件，以commonJS模式导出一个对象
  
  **
```
module.exports = {
  foo: 'bar'
}
```
2. 安装插件，并在plugins中配置
3. index.js引用模块，并使用
4. 打包结果如下
  
  **
```
(function () {
    ...
    var cjsModule = {
        foo: 'bar'
    };
    log(cjsModule);
    ...
}());
```
Rollup代码拆分

可以使用import()的方式动态导入文件，返回是一个promise对象

**
```
import('./logger').then(({ log }) => {
  log('hello')
})
```
此时通过yarn rollup --config运行打包报错UMD and IIFE output formats are not supported for code-splitting builds，因为立即执行函数会将所有模块放入同一个函数，没法实现代码拆分，需使用amd或commonjs标准

并且code-splitting会输出多个文件，rollup输出需要使用dir的方式，修改rollup.config.js

**
```
// rollup默认入口
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife',
    dir: 'dist',
    format: 'amd',
  },
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}
```
再次打包，就会在dist目录下生成入口bundle和动态导入生成的bundle，并且都是使用amd标准输出

rollup-plugin-includepaths rollup插件管理

Rollup快速上手

Rollup配置文件

Rollup使用插件

Rollup代码拆分