与其他 NPM 包

场景

项目可能会依赖于从 NPM 安装到 node_modules 文件夹中的软件包，
Rollup 默认情况下不知道如何处理这些依赖项

实例

应用插件

the-answer

安装命令

npm install the-answer

更新src/main.js 文件

// src/main.js
import answer from 'the-answer';export default function () {console.log('the answer is ' + answer);
}

结果

提示the-answer没有依赖， import 声明会被转换为 CommonJS 的 require 语句，但是 the-answer 不会被包含在 bundle 中（可以理解为以require 方法引入插件）

解决方案

插件

@rollup/plugin-node-resolve

安装命令

npm install --save-dev @rollup/plugin-node-resolve

添加到配置文件中

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';export default {input: 'src/main.js',output: {file: 'bundle.js',format: 'cjs'},plugins: [resolve()]
};

结果

没有报错；并且对应代码种引入的插件（the-answer）会被解析，然后与自己写的代码一起进行打包

@rollup/plugin-commonjs

该插件是将 CommonJS 转换为 ES2015

对等依赖项

作用

精准控制哪些插件需要解析并进行内部打包，哪些插件打包后以外部引入的方式应用

配置文件

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';export default {input: 'src/main.js',output: {file: 'bundle.js',format: 'cjs'},plugins: [resolve({// 将自定义选项传递给解析插件moduleDirectories: ['node_modules']})],// 指出哪些模块应该视为外部模块external: ['lodash']
};

Babel

作用

尚未被浏览器和 Node.js 支持的最新 JavaScript 特性

安装命令

npm i -D @rollup/plugin-babel @rollup/plugin-node-resolve

配置文件

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';export default {input: 'src/main.js',output: {file: 'bundle.js',format: 'cjs'},plugins: [resolve(), babel({ babelHelpers: 'bundled' })]
};