rollup学习整理-1-api详解

RollUP 学习整理

创建项目，安装 Rollup

    mkdir rollup-demo    cd rollup-demo    mkdir src  #创建源码目录    npm init    sudo npm install --save-dev rollup #安装Rollup

创建配置文件

项目根目录下，创建 rollup.config.js 配置文件

export default {   input: './src/main.js',    output: {       file: './dist/js/bundle.js',       format: 'iife',       name: 'MyBundle',    },   plugins: [],    externals: [],    globals: {       jquery: '$'   },   banner: 'const a = 6; console.log(a);',    footer: '/* this is footer */',   intro: 'const a = 6;',    outro: '/* this is outro */',   cache: true,    sourcemap: 'true',    strict: true, }

配置文件参数详解

1. input

项目入口

    input: './src/main.js', // 项目入口

2. output

项目输出配置

   output: { // 编译后文件      file: './dist/js/bundle.js', // 打包后的路径      format: 'iife', // 生成包的格式规范 包括 amd umd cjs es iife      name: 'MyBundle', // 打包后的包名 iife / umd包 // -> var MyBundle = (function () {...   },

3. plugins

插件项

  plugins: [    resolve(),    commonjs()  ]

4. externals

外部引用 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖， 一般用于library开发，以下是官网的例子

  external: [    'some-externally-required-library',    path.resolve( './src/some-local-file-that-should-not-be-bundled.js' )  ]

5. globals

全局模块 提供将外部模块ID转换为全局模块的功能

   globals: { // 全局模块 提供将外部模块ID转换为全局模块的功能      jquery: '$'   },

6. banner / footer

前置 / 追加 到文件束，最终添加到了生成包的外部，可以是代码也可以是注释

    banner: 'const a = 6; console.log(a);',    footer: '/* this is footer */',

结果

    const a = 6; console.log(a); // banner    (function () {    'use strict';    ...    }());    /* this is footer */ // footer

7. intro / outro

与banner / footer 差不多，但是内容最终添加到了生成包的内部

    intro: 'const a = 6;',    outro: '/* this is outro */',

结果

  (function () {  'use strict';  const a = 6; // intro  ...  /* this is outro */ // outro  }());

8. cache

缓存

    cache: true, // 缓存

9. sourcemap

• true: 会创建单独的 sourcemap 文件
• inline: sourcemap将作为数据URI附加到生成的output文件中。

    sourcemap: 'true',

10. strict

strict: true 严格模式，默认开启

相关文章

1. rollup学习整理-1-api详解
2. rollup学习整理-2-插件详解