解决ts+rollup打包报错以及警告

前言

我在使用 rollup + ts 开发一个npm包打包时遇到了该报错以及一些警告问题，谨以此篇记录一下自己的踩坑学习过程，也希望能帮助到其他同学！

如果文章对你有帮助，可以点赞、评论、收藏、转发互动支持哈 😀😀😀

点击 学习交流群(前端微信群) 加vx拉你进 前端学习交流群 让我们一起 好好学习（🐟🐟🐟）吧😎😎😎

Error: Unexpected token Note that you need plugins to import files that are not JavaScript

ps：意外的令牌请注意，您需要插件来导入非JavaScript的文件

最初解决：

查询资料后说需要安装 @rollup/plugin-typescript 插件支持 ts，然后在 rollup 配置文件中使用可解决。

最开始使用该方案确实解决了，但是后来写着写着突然又又又报这个错了！！！！

起初我以为是 @rollup/plugin-typescript 插件没安装好，或者是本地依赖包的问题，然后就尝试解决，开始踩坑：

注释该文件的ts方法、卸载该依赖、重新安装、删除整个 node_modules 文件夹重新 install等都无效。

网上资料说安装 rollup-plugin-typescript2插件也是无法解决！

我开始郁闷了，于是我就仔细看我的源码，确实没发现没啥问题啊，反复检查了依赖也没问题！！！就是一直在报这个错，这个问题卡了我近2个小时。

最后最后终于在这个链接中找到答案解决了问题： Typescript 插件 4.0.0 错误：意外的令牌（请注意，您需要插件来导入非 JavaScript 的文件） ·期号 #287 ·汇总/插件 ·GitHub上

原来只需要在 tsconfig.json 配置文件里的 compilerOptions字段下添加 rootDir 根目录字段：

"rootDir": "src",

或者值修改为 ./，然后奇迹发生了，不报错了！！打包成功！！！ 我真的要裂开了。

我想大概率是因为我的源码整个目录下，除了src目录外存在非js文件，导致了打包后就出现了这个错误。

rollup+ts打包的一些警告问题解决

1、Missing global variable names

因为我的npm包源码中使用了一些 node的模块，如：fs等，所以打包后的产物部分模块需要在配置文件中配置全局变量：

配置完后重新打包就没有警告了

2、Unresolved dependencies（未解决的依赖关系）

警告表明 Rollup 在解析依赖时遇到了未解决的依赖关系。这些警告通常是由于一些模块使用了 Node.js 内置模块或全局对象，而 Rollup 在默认情况下不会处理这些模块。

解决:

手动标记为外部依赖 ：对于引发警告的模块，可以手动将其标记为外部依赖 ，告诉 Rollup 不要将其打包进最终的输出文件中。可以使用 external 选项来指定这些模块

rollup.config.js:

external: ['os', 'process', 'tty', 'stream', 'buffer', 'events', 'util'],

3、Missing shims for Node.js built-ins

Node.js内置项缺少垫片。查询资料意思是：对于在浏览器中创建依赖于 "stream", "events", "buffer" 和 "util" 的捆绑包而言，可能需要考虑使用 rollup-plugin-polyfill-node 这个插件。

这个插件可以为这些 Node.js 内置模块提供浏览器端的 polyfill，从而使它们能够在浏览器环境中正常工作。

但是我安装了 rollup-plugin-polyfill-node 使用后并没有生效！

最终参考了这篇文章解决： 改进了"缺少Node.js内置垫片"的建议 ·问题 #3230 ·汇总/汇总 (github.com)

先开始安装了这两个插件 rollup-plugin-node-builtins & rollup-plugin-node-globals 会报错如下：

仔细查看资料我是使用的 @rollup/plugin-node-resolve 找到npm文档，果然有 browser 参数

@rollup/plugin-node-resolve 部分参数作用：

• exportConditions

  exportConditions: ['node', 'browser']

  这表示在解析模块路径时，插件将考虑两个导出条件：node 和 browser。这对于处理那些根据运行环境导出不同模块的情况非常有用。

• preferBuiltins

  用于指定是否将导入的模块路径映射到浏览器版本的路径,当设置为 true 时，该插件会尝试将模块路径转换为适用于浏览器环境的路径。

• browser

  browser 参数允许您控制 Rollup 如何解析模块路径 ，以便在浏览器环境下正确地加载和使用模块
  browser 参数用于指定是否将导入的模块路径映射到浏览器版本的路径。当设置为 true 时，该插件会尝试将模块路径转换为适用于浏览器环境的路径。
  例如，某些库可能会针对 Node.js 和浏览器环境提供不同的入口文件或路径。通过设置 browser: true，您可以告诉 Rollup 在解析模块路径时优先使用适用于浏览器的路径。

  这样可以确保在构建浏览器端代码时，正确地解析和使用浏览器特定版本的模块，而不会因为路径不匹配而导致错误或警告。

  这对于确保项目在不同环境下的兼容性非常重要(ps:虽然我们这个我自己的这个npm包是不会在浏览器环境下使用)

最终配置文件中使用：

  nodeResolve({
    exportConditions: ['node', 'browser'],
    preferBuiltins: false,
    browser: true,
  }),

browser 参数配置为 true 后解决了这个报错，并且解决了下面 警告5 import jszip包的循环依赖问题！

4、Circular dependencies（存在循环依赖）

循环依赖问题，主要是因为是比如我在 utils 下入口文件 index.ts 中直接 export * from "./msgPush";

而在对应 msgPush.ts 中 又引入了import { getStyleString, xtsBgStyle, xtsBgStyle2} from "../utils/index";

所以就出现了循环引用的警告， 而 msgPush.ts 文件中使用到那些函数应该直接导入对应函数文件的路径 ，而不应该直接从 utile/index 中导入！！！

5、使用import方式导入jszip包（存在循环依赖）

使用 import 方式导入 jszip

使用rollup 打包后就会报这个警告：

最开始一直找不到原因，以为是插件版本问题，但是都已经升级到最新了。最后还是在处理上面 警告3问题时解决了。

6、You have passed an unrecognized option（Unknown input options: onLog.）

这个警告说是传递了一个未被识别的选项给 Rollup，该选项名为 onLog。 而 Rollup 并不认识这个选项，因此产生了警告，但是我的源码中根本没用到这个东西啊？

查看当前依赖：

最终在这里解决： 显示警告："未知输入选项：onLog。 ·问题 #246 ·火智/邦奇 (github.com)

我直接尝试升级 rollup 版本，果然！ 升级 rollup 到最新版本后，该警告就消失了！但是升级3.x以上版本后又报了其他错误（传送门：todo）