使用 rollup 打包项目的一些问题及解决方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，项目打包是必不可少的一环，而 rollup 作为一款现代的 JavaScript 模块打包器，越来越受到开发者们的青睐。然而，在使用 rollup 进行项目打包时，也会遇到一些问题，本文将会介绍一些常见的问题及对应的解决方法。

问题一：打包出来的文件过大

当使用 rollup 打包项目时，经常会出现打包出来的文件过大的问题，这是因为 rollup 默认会将所有的代码都打包进去，包括一些没有用到的模块，这样就会导致打包出来的文件过大。

解决方法：

使用 tree shaking 技术

tree shaking 可以在打包时将没有用到的模块去掉，从而减小打包出来的文件体积。在 rollup 中，可以通过配置 treeshake 选项来开启 tree shaking 功能，示例代码如下：

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  treeshake: true
}

使用代码分离技术

代码分离技术可以将代码分成多个文件，从而减小每个文件的体积。在 rollup 中，可以使用 output.manualChunks 选项将代码分成多个文件，示例代码如下：

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm',
    manualChunks(id) {
      if (id.includes('node_modules')) {
        return 'vendor';
      }
    }
  }
}

问题二：打包出来的文件不能在浏览器中运行

当使用 rollup 打包项目时，有时会出现打包出来的文件不能在浏览器中运行的问题，这是因为 rollup 默认会使用 ES6 模块语法，而浏览器并不支持 ES6 模块语法。

解决方法：

使用 Babel 转换语法

使用 Babel 可以将 ES6 模块语法转换成浏览器支持的语法，从而让打包出来的文件能够在浏览器中运行。在 rollup 中，可以使用 @rollup/plugin-babel 插件来实现语法转换，示例代码如下：

// rollup.config.js
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyLibrary'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled'
    })
  ]
}

使用 CDN 引入依赖

如果打包出来的文件依赖较多，使用 Babel 转换语法可能会增加打包时间，此时可以考虑使用 CDN 引入依赖，这样可以减小打包出来的文件体积，加快加载速度。示例代码如下：

<!-- 在 HTML 中引入依赖 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash"></script>

<!-- 在 rollup.config.js 中使用 external 配置 -->
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyLibrary'
  },
  external: ['vue', 'lodash']
}

问题三：打包出来的文件缺少一些依赖

当使用 rollup 打包项目时，有时会出现打包出来的文件缺少一些依赖的问题，这是因为 rollup 默认只会打包项目中使用到的模块，如果某个模块没有被使用到，那么就不会被打包。

解决方法：

使用 @rollup/plugin-node-resolve 插件

使用 @rollup/plugin-node-resolve 插件可以让 rollup 在打包时自动解析依赖，从而打包出来的文件包含所有依赖。示例代码如下：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve()
  ]
}

在 rollup.config.js 中手动配置依赖

如果某个依赖没有被自动解析，可以在 rollup.config.js 中手动配置依赖，示例代码如下：

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  external: ['vue'], // 手动配置依赖
  plugins: [
    // ...
  ]
}

总结

使用 rollup 打包项目时，可能会遇到一些问题，如打包出来的文件过大、打包出来的文件不能在浏览器中运行、打包出来的文件缺少一些依赖等。本文介绍了一些常见的问题及对应的解决方法，希望能够对使用 rollup 进行项目打包的开发者们有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c0487eadd4f0e0ffa133da