TypeScript 2.0 - การกำหนดชื่อทางลัดเส้นทางนำเข้าใน TypeScript

ฉันกำลังทำงานกับแอปพลิเคชัน TypeScript ซึ่งประกอบด้วยโมดูล Node หลายตัวที่เขียนด้วย TypeScript และถูกติดตั้งลงในไดเรกทอรี node_modules

ก่อนที่จะดำเนินการต่อ ผมอยากจะบันทึกว่า ผมกำลังใช้ TypeScript 2.0 และผมก็ไม่ได้ต่อต้านการใช้เวอร์ชันพัฒนา 2.1 หากจำเป็นเช่นกัน ผมแค่อยากให้สิ่งนี้ทำงานได้

โครงสร้างของโมดูล Node แต่ละตัวมีลักษณะประมาณดังนี้:

dist/
    es2015/
        index.js
        utils/
            Calculator.js
            Calculator.d.ts
            Date.js
            Date.d.ts
            Flatpack.js
            Flatpack.d.ts
src/
    index.ts
    utils/
        Calculator.ts
        Date.ts
        Flatpack.ts

โฟลเดอร์ dist เป็นซอร์สที่ถูกสร้างขึ้น โดยพาธนี้ถูกกำหนดค่าด้วย outDir ภายในไฟล์ tsconfig.json ของฉัน ฉันยังได้กำหนดค่าคุณสมบัติ main ใน package.json ของฉันให้เป็น dist/es2015/index.js

สิ่งสำคัญที่ควรสังเกต:

• ในโปรเจกต์ของฉันฉันกำลังใช้ประเภท moduleResolution เป็น node
• ฉันกำลังใช้ TypeScript 2.0
• ฉันไม่ได้ถามวิธีการนำเข้าไฟล์จากภายในแพ็กเกจ ฉันกำลังติดตั้งแพ็กเกจผ่าน Npm แล้วจึงนำเข้ามันผ่าน packagename/ จากภายในแอปพลิเคชันที่กำลังใช้โมดูลนี้

ตอนนี้มาถึงคำถาม/ปัญหาของฉัน ในขณะที่กำลังนำเข้าไฟล์จากโมดูลนี้ ฉันต้องการที่จะสามารถทำแบบนี้ได้:

import {Sin, Cos, Tan} from "common-utils/utils/Calculator";

อย่างไรก็ตาม ไฟล์ไม่สามารถแก้ไขไปยังไดเรกทอรี dist/es2015/utils ได้ โดยในอุดมคติ ฉันต้องการให้การนำเข้าไฟล์ของฉันแก้ไขจากโฟลเดอร์ dist เฉพาะนี้ ไม่ใช่จากโฟลเดอร์ราก ซึ่งดูเหมือนว่าจะเกิดขึ้นอยู่

การนำเข้าข้างต้นต้องเขียนดังต่อไปนี้เพื่อให้มันใช้งานได้:

import {Sin, Cos, Tan} from "common-utils/dist/es2015/utils/Calculator";

อย่างไรก็ตาม การเขียน dist/es2015 ทุกครั้งไม่ใช่เรื่องที่เหมาะสม และมันทำให้การนำเข้าบางอย่างดูยาวไป มีวิธีใดบ้างที่ฉันสามารถกำหนดค่าโมดูลของฉันให้แก้ไขไปที่ไดเรกทอรี dist/es2015 ได้หรือไม่ ฉันไม่ต้องการใส่การแทนค่าภายในโปรเจกต์ของฉัน ในอุดมคติแล้วแต่ละโมดูลควรกำหนดว่าควรแก้ไขไฟล์จากที่ไหน

ถ้าคุณยังไม่แน่ใจว่าฉันกำลังถามอะไรอยู่ (และฉันขอโทษถ้าสิ่งนี้ทำให้สับสน) ใน Jspm เมื่อคุณสร้างปลั๊กอิน/โมดูลเพื่อใช้กับ Jspm คุณสามารถระบุภายใน package.json ของโมดูลบางอย่างเหมือนดังต่อไปนี้:

  "jspm": {
    "registry": "npm",
    "jspmPackage": true,
    "main": "my-module",
    "format": "amd",
    "directories": {
      "dist": "dist/amd"
    },

ฉันกำลังมองหาสิ่งที่เทียบเท่าของด้านบนใน TypeScript (ถ้ามี) คือคำสั่งแมปปิ้ง เพื่อเมื่อผู้ใช้ปลายทางรัน npm install my-cool-package และจากนั้นในแอปของพวกเขาพยายามที่จะนำเข้าบางสิ่ง การนำเข้าทั้งหมดโดยค่าเริ่มต้นจะถูกแก้ไขไปยังไดเรกทอรี commonjs (ตัวอย่างด้านบนสำหรับ Jspm ใช้ amd แต่หลักการเดียวกัน)

นี่เป็นไปได้หรือว่าฉันเข้าใจอะไรผิดบางอย่าง? ฉันรู้ว่ามีการเพิ่มฟีเจอร์การแมปเส้นทางใหม่ในเวอร์ชันล่าสุด แต่เอกสารเกี่ยวกับการใช้งานแทบจะไม่มีเลย

คำตอบ #1

ดังนั้นหลังจากอ่านความคิดเห็นของคุณแล้ว ฉันก็ตระหนักว่าฉันเข้าใจคำถามของคุณผิด! ถ้าคุณต้องการควบคุมเส้นทางจากมุมมองของแพ็กเกจที่นำเข้ามา แค่ตั้งค่าคุณสมบัติ main ของ package.json ของคุณไปยังไฟล์ที่แสดงกราฟวัตถุของโมดูลของคุณอย่างถูกต้อง

{
  "main": "common-utils/dist/es2015/index.js"
}

หากคุณกำลังพยายามควบคุมเส้นทางการนำเข้าจากมุมมองของโครงการ สิ่งที่คุณกำลังมองหาคือคุณสมบัติการแมปเส้นทางใหม่ของ TypeScript 2 สำหรับการแก้ไขโมดูล คุณสามารถเปิดใช้งานการแมปเส้นทางได้โดยการกำหนดค่า tsconfig.json ของคุณดังนี้:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "angular2/*": ["../path/to/angular2/*"],
      "local/*": ["../path/to/local/modules/*"]
    }
  }
}

จากนั้น ในไฟล์ TypeScript ของคุณ คุณสามารถนำเข้าโมดูลได้เช่นนี้:

import { bootstrap } from 'angular2/bootstrap';
import { module } from 'local/module';

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์การทำแผนที่เส้นทางใน TypeScript 2 โปรดดูปัญหานี้ใน Github

ในกรณีของคุณ ผมคิดว่าการกำหนดค่าดังต่อไปนี้น่าจะใช้งานได้:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "common-utils/utils/*": ["./node_modules/common-utils/dist/es2015/utils/*"]
    }
  }
}

คำตอบ #2

หากคุณกำลังใช้เส้นทาง คุณจะต้องเปลี่ยนเส้นทางสัมบูรณ์กลับเป็นเส้นทางสัมพัทธ์เพื่อให้สามารถทำงานได้หลังจากคอมไพล์ TypeScript เป็น JavaScript ปกติโดยใช้ tsc

วิธีแก้ปัญหาที่ได้รับความนิยมมากที่สุดสำหรับเรื่องนี้จนถึงตอนนี้คือ tsconfig-paths

ฉันได้ลองมันแล้ว แต่สำหรับการตั้งค่าที่ซับซ้อนของฉัน มันไม่ทำงาน นอกจากนี้ มันยังแก้ไขเส้นทางในเวลารันไทม์ ซึ่งหมายถึงภาระในแง่ของขนาดแพ็กเกจและประสิทธิภาพการแก้ไข

ดังนั้น ฉันจึงเขียนโซลูชันด้วยตัวเอง ชื่อ tscpaths

ผมคงจะบอกว่ามันดีกว่าโดยรวมเพราะมันแทนที่เส้นทางในช่วงคอมไพล์ ซึ่งหมายความว่าจะไม่มีการพึ่งพาในขณะรันไทม์หรือภาระด้านประสิทธิภาพใดๆ การใช้งานค่อนข้างง่าย คุณแค่ต้องเพิ่มบรรทัดหนึ่งลงในสคริปต์บิวด์ของคุณใน package.json

โครงการนี้ค่อนข้างใหม่ ดังนั้นอาจมีปัญหาบ้างหากการตั้งค่าของคุณซับซ้อนมาก มันทำงานได้อย่างสมบูรณ์แบบสำหรับการตั้งค่าของฉัน แม้ว่าการตั้งค่าของฉันจะค่อนข้างซับซ้อนก็ตาม