前言
我在使用 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 根目录字段：
js
"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:
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
arduinoexportConditions: ['node', 'browser']这表示在解析模块路径时，插件将考虑两个导出条件：
node和browser。这对于处理那些根据运行环境导出不同模块的情况非常有用。 -
preferBuiltins
用于指定是否将导入的模块路径映射到浏览器版本的路径,当设置为
true时，该插件会尝试将模块路径转换为适用于浏览器环境的路径。 -
browser
browser参数允许您控制 Rollup 如何解析模块路径 ，以便在浏览器环境下正确地加载和使用模块
browser参数用于指定是否将导入的模块路径映射到浏览器版本的路径。当设置为true时，该插件会尝试将模块路径转换为适用于浏览器环境的路径。
例如，某些库可能会针对 Node.js 和浏览器环境提供不同的入口文件或路径。通过设置browser: true，您可以告诉 Rollup 在解析模块路径时优先使用适用于浏览器的路径。这样可以确保在构建浏览器端代码时，正确地解析和使用浏览器特定版本的模块，而不会因为路径不匹配而导致错误或警告。
这对于确保项目在不同环境下的兼容性非常重要(ps:虽然我们这个我自己的这个npm包是不会在浏览器环境下使用)
最终配置文件中使用：
js
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）