กำลังสร้าง Typescript: [!] ข้อผิดพลาด: พบโทเคนที่ไม่คาดคิด (โปรดทราบว่าคุณจำเป็นต้องใช้ปลั๊กอินเพื่อ import ไฟล์ที่ไม่ใช่ JavaScript)

ฉันพบปัญหาในการสร้างแพ็กเกจ TypeScript ด้วย Rollup ภายในมอนอรีโปที่จัดการโดย Lerna

ข้อผิดพลาด :

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'

ข้อผิดพลาดชี้ไปที่โทเคน "export type" ซึ่งก็... สับสน ทำไม TypeScript ถึงไม่เข้าใจโครงสร้างของตัวเองก็ไม่แน่ใจ

สามารถทำให้เกิดข้อผิดพลาดได้โดยการโคลนรีโพซิทอรีและรัน 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 Header factory ถูกใช้งานภายใน index.ts และไม่ให้ข้อผิดพลาด ทำงานตามที่ตั้งใจไว้ และให้พฤติกรรมที่กำหนดไว้

สัญชาตญาณแรกของฉันคือเลือกที่จะไม่ใช้การสร้าง cjs เพราะนั่นคือความแตกต่างหลักระหว่างสองการสร้าง (build:packages และ build:dev) แต่ก็ไม่ได้ทำให้เกิดความแตกต่างใด ๆ ดังนั้นจึงเหลือเพียงปัญหาการแก้ไข @organization/package ฉันเดาว่า ฉันไม่แน่ใจ… ไม่ใช่เรื่องที่ฉันรู้ว่าจะไปต่อจากตรงนั้นอย่างไรหากเป็นกรณีนั้น การลบ export ที่ export type Component =... ภายในไฟล์ต้นฉบับ component.ts จะทำให้ข้อผิดพลาดหายไป แต่แน่นอนว่ามันก็สร้างข้อผิดพลาดใหม่ภายใน mokui-header HeaderComponent บ่นว่า Component is a value but used as type เพราะว่า… ตอนนี้ไม่มีการส่งออกประเภท Component ให้ใช้งานอีกต่อไป

ดังนั้น ถ้าคุณมีไอเดียว่าฉันควรไปทางไหนจากตรงนี้หรือรู้ว่าฉันควรสร้างแพ็กเกจไทป์สคริปต์ซึ่งขึ้นอยู่กับแพ็กเกจพี่น้องอีกตัวอย่างไร โปรดแชร์มันด้วย

ฉันขอโทษหากฉันพูดจาหยาบคาย แต่กรุณาอย่าแนะนำให้ฉันเลือกที่จะไม่ใช้การสร้างแบบกำหนดเองและไปใช้แบบสำเร็จรูปหรือตัวอย่างสำเร็จรูปอะไรประมาณนั้น

ขอบคุณล่วงหน้า!

คำตอบ #1

ในกรณีที่ใครเจอปัญหาเดียวกัน ด้านล่างนี้ฉันขอเสนอวิธีแก้ไข:

เมื่อมีคนพยายามสร้างแต่ละแพ็กเกจแยกกันภายในมอนอรีโป Rollup จะพยายามแก้ไข @organization/package-name และรวมมันในการสร้าง คุณคงไม่ต้องการแบบนั้น ดังนั้นเพื่อหลีกเลี่ยงขณะสร้างแต่ละแพ็กเกจ ผมจึงกำลังวิเคราะห์ package.json ดึงคีย์ของฟิลด์ dependencies ออกมา แล้วตรวจสอบกับคีย์เหล่านั้นภายใน callback ที่สามารถระบุในฟิลด์ external ของการตั้งค่า Rollup วิธีนี้จะให้ผลลัพธ์ตามที่ต้องการ

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 ใช้ได้ผล

ฉันพบวิธีแก้ปัญหาในปัญหาหนึ่งของ repo rollup/plugins

คำตอบ #1

คำตอบ #2

บทความที่เกี่ยวข้อง