如何用Rollup.js打包含外部WebFontLoader库的JavaScript文件？

嘿，我明白你的问题了——你想把helloWorld.js打包成bundle.js，但希望webfontloader通过单独的script标签引入，结果打包出来的bundle.js里多了不需要的前缀，对吧？这其实是打包工具没把webfontloader识别成外部依赖导致的，下面给你针对常用打包工具的解决方案：

核心思路是告诉打包工具：webfontloader是一个外部全局变量，不用把它的代码打包进bundle.js，直接在运行时从全局环境读取即可。

如果你用Webpack #

在你的webpack.config.js中添加externals配置项，指定webfontloader对应的全局变量名：

module.exports = {
  // 其他已有的配置（比如entry、output等）
  externals: {
    'webfontloader': 'WebFont'
  }
};

这样Webpack打包时，会把你代码里的import WebFont from 'webfontloader'或者const WebFont = require('webfontloader')转换成对全局变量WebFont的引用，既不会把webfontloader的代码塞进bundle.js，也不会生成多余的前缀。

如果你用Rollup #

在rollup.config.js中配置external和globals：

export default {
  input: 'helloWorld.js',
  output: {
    file: 'bundle.js',
    format: 'iife', // 根据需求也可以选umd、cjs等格式
    globals: {
      'webfontloader': 'WebFont'
    }
  },
  external: ['webfontloader']
};

• external告诉Rollup不要打包webfontloader这个依赖
• globals指定在浏览器环境中，这个依赖对应的全局变量名是WebFont

最后确认HTML的引入顺序 #

一定要先引入webfontloader的文件，再引入你的bundle.js，确保WebFont全局变量在bundle.js执行前就已经存在：

<!DOCTYPE html>
<meta charset="utf-8">
<!-- 先引入webfontloader -->
<script src="path/to/webfontloader.js"></script>
<!-- 再引入打包后的bundle.js -->
<script src="bundle.js"></script>
<h1>Hello World</h1>

这样处理后，你的bundle.js就不会再有多余的前缀，而且能正常使用全局的WebFont对象啦！

内容的提问来源于stack exchange，提问作者ee2Dev