构建打字稿：[!] 错误：意外令牌（请注意，您需要插件才能导入非 JavaScript 的文件）

Question

我在 lerna 管理的 monorepo 中使用 rollup 构建打字稿包时遇到了问题。

错误：

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'

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

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

有趣的是，mokui-base它Component本身定义的构建就很好的包，只有当一个人依赖它时才会在构建时出现上面的错误，就像我在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, Headerfactory构建得很好index.ts并且在内部使用并且没有错误，按意图工作并提供定义的行为。

我的第一直觉是选择退出 cjs 构建，因为这是两个构建（构建：包和构建：开发）之间的主要区别，但这没有任何区别，所以@organization/package我猜是解决问题，我是不确定......如果是这样的话，我不知道从那里去哪里。export在export type Component =...内部component.ts源中删除可以消除错误，但当然这会在mokui-header HeaderComponent抱怨中产生新错误Component is a value but used as type，因为好吧......Component不再需要使用类型导出。

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

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

提前致谢！

Answer 1

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

当尝试在 monorepo 中构建每个单独的包时，rollup 会尝试解析@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;

Answer 2

我也有同样的错误消息，也使用lerna.

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

我在repo上的一个问题rollup/plugins中找到了解决方案。