构建 Typescript：[！] 错误：意外的令牌（请注意，您需要插件来导入不是 JavaScript 的文件）

Posted 2023-02-16

【中文标题】构建 Typescript：[！] 错误：意外的令牌（请注意，您需要插件来导入不是 JavaScript 的文件）

【英文标题】：Building Typescript: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

【发布时间】：2020-03-12 11:38:23

【问题描述】：

我在 lerna 管理的 monorepo 中使用汇总构建 typescript 包时遇到了问题。

Error:

lerna ERR! rollup --config ../../rollup.config.js stderr:
loaded ../../rollup.config.js with warnings
(!) Unused external imports
terser imported from external module 'rollup-plugin-terser' but never used

index.ts → dist/esm...
[!] Error: Unexpected token (Note that you need plugins to import files that are not javascript)
../mokui-base/component.ts (3:7)
1: const root = Symbol("root");
2: 
3: export type Component<T extends object = > = T & 
          ^
4:         [root]: Element;
5:         attach(element: Element): Component<T>;
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:5351:30)
    at Module.error (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9643:9)
    at tryParse (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9552:16)
    at Module.setSource (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:9868:33)
    at Promise.resolve.catch.then.then.then (/****/****/code/js/mokui/node_modules/rollup/dist/rollup.js:12148:20)


lerna ERR! rollup --config ../../rollup.config.js exited 1 in '@moki.codes/mokui-header'

“导出类型”标记的错误点很好......令人困惑，我不确定为什么打字稿不理解自己的构造。

可以通过克隆repository 并运行yarn build:packages 来重现错误 @master 分支。

有趣的是，定义Component 的mokui-base 包本身构建得很好，只有当像我在mokui-header 中那样依赖它时才会在构建时给出上面的错误。通过添加可重现

if (process.env.LERNA_PACKAGE_NAME === "@moki.codes/mokui-header")
    process.exit(0);

在rollup.config.js 的顶部并运行yarn build:packages。

我还有另一个构建目标“dev”，可以尝试使用yarn build:dev，它从stories/index.ts 构建，并服务于localhost:3000。它与问题相关，因为在那里，mokui-header Header 构建得很好，具体取决于 mokui-base Component，Header 工厂在 index.ts 内部使用并且没有给出错误，按预期工作并提供定义的行为.

我的第一个直觉是选择退出 cjs 构建，因为这是两个构建（build:packages 和 build:dev）之间的主要区别，但这没有任何区别，所以剩下 @organization/package 分辨率问题我想，我不确定......如果是这样的话，我不知道从那里去哪里。在export type Component =... 内部component.ts 源中删除export 可以消除错误，但当然这会在mokui-header HeaderComponent 中产生新的错误，抱怨Component is a value but used as type，因为嗯......没有@ 987654347@ 类型 export 来消费了。

所以，是的，如果你有任何想法我应该从这里开始，或者确切地知道我应该如何构建 typescript 包，这取决于另一个兄弟姐妹，请分享它们。

如果我表现得粗鲁，我很抱歉，但请不要建议我选择退出自定义构建并使用预配置的样板或类似的东西。

提前致谢！

【参考方案1】：

如果有人遇到同样的问题，下面我提供解决方案：

当尝试在 monorepo 中构建每个单独的包时，汇总会尝试解析 @organization/package-name 并将其包含在构建中。你不希望这样，所以为了避免在构建每个包时我解析package.json，提取dependencies字段的键，然后在callback中检查它们，可以提供内部汇总配置的external字段.这将产生预期的结果。

import json from "rollup-plugin-json";

const pkg = process.env.LERNA_PACKAGE_NAME &&
          require(`$process.env.LERNA_PACKAGE_NAME/package.json`);

const dependencies = ( dependencies ) => Object.keys(dependencies || );

const pkgdependencies = dependencies(pkg);

/* exported rollup configuration */
const config = 
    /* your config goes here... */
    /* id is the source name if list of dependencies includes
     * id source name, then mark it as external,
     */
    external: id => pkgdependencies.includes(id)
;

export default config;

【参考方案2】：

我也收到了同样的错误信息，也使用了lerna。

对我来说将typescript 更新到版本4.2.3 成功了。

我在an issue on the rollup/plugins repo找到了解决方案。

【讨论】：

非常感谢您发布此答案。我只是浪费了几个小时试图弄清楚出了什么问题。如果我没有遇到这个，我不知道我会做什么。

【参考方案3】：

清除（手动删除）由先前汇总创建的 *.d.ts 文件将解决该问题。如果您有 dist 文件夹（将在其中创建汇总文件的文件夹），请将其清除。 这为我解决了问题。