打败恼人的打包报错，轻松搞定rollup编译难题

使用 Rollup 轻松解决“'default' is not exported”报错

什么是 Rollup

在前端开发中，我们需要经常将 ES6 代码编译成 ES5 代码以确保兼容性。Rollup 是一个广受欢迎的编译工具，它可以轻松地完成这一任务。

“'default' is not exported”报错

在使用 Rollup 编译 ES6 代码时，我们有时会遇到“Error: 'default' is not exported by node_modules\jquery\dist\jquery.js, imported by node_modules\bootstrap\js\src\util.js”这样的报错。

问题分析

该报错通常是因为我们在 ES6 代码中使用 default 导出了模块，而导入模块时却未使用 default 。这会导致 Rollup 在编译代码时找不到 default 关键字，从而引发报错。

解决方案：安装 @rollup/plugin-commonjs 插件

要解决这个问题，我们需要安装一个 Rollup 插件，即 @rollup/plugin-commonjs。该插件可以帮助我们将 CommonJS 模块转换为 ES 模块，从而解决 Rollup 在编译代码时找不到 default 关键字的问题。

步骤

1. 安装 @rollup/plugin-commonjs 插件：

   npm install @rollup/plugin-commonjs --save-dev
   

2. 修改 rollup.config.js 文件：

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

总结

通过安装 @rollup/plugin-commonjs 插件并修改 rollup.config.js 文件，我们可以轻松解决“Error: 'default' is not exported”的问题。

附加信息

除了使用 @rollup/plugin-commonjs 插件，我们还可以使用其他方法来解决这个问题，例如使用 Webpack 或 Babel 来编译 ES6 代码。但是，@rollup/plugin-commonjs 插件是最简单、最直接的方法。

常见问题解答

1. 为什么会出现“'default' is not exported”错误？
   该错误通常是因为导出了模块的 default 关键字未在导入模块时使用。

2. 除了安装 @rollup/plugin-commonjs 插件，还有其他方法来解决该问题吗？
   是的，还可以使用 Webpack 或 Babel 来编译 ES6 代码。

3. 安装 @rollup/plugin-commonjs 插件后，还需要做哪些其他修改？
   需要修改 rollup.config.js 文件，将 @rollup/plugin-commonjs 插件添加到插件列表中。

4. 如何知道是否已成功安装 @rollup/plugin-commonjs 插件？
   查看 node_modules 文件夹，如果其中存在 @rollup/plugin-commonjs 文件夹，则说明已成功安装。

5. 该解决方案适用于哪些版本的 Rollup？
   该解决方案适用于 Rollup 的所有版本。