วิธีใช้เส้นทางใน tsconfig.json

ผมได้อ่านเกี่ยวกับเส้นทางการทำแผนที่ในtsconfig.jsonและฉันต้องการที่จะใช้มันเพื่อหลีกเลี่ยงการใช้เส้นทางที่น่าเกลียดต่อไปนี้:

การจัดโครงการเป็นเรื่องแปลกเพราะเรามีแหล่งเก็บข้อมูลเดียวที่มีโครงการและห้องสมุด โครงการจัดกลุ่มตาม บริษัท และเบราว์เซอร์ / เซิร์ฟเวอร์ / สากล

ฉันจะกำหนดค่าเส้นทางได้อย่างไรtsconfig.json:

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

ฉันสามารถใช้:

import { Something } from "lib/src/[browser/server/universal]/...";

จะต้องมีอย่างอื่นในการกำหนดค่า webpack หรือไม่ หรือtsconfig.jsonเพียงพอหรือไม่

สามารถตั้งค่าไฟล์ tsconfig.json ของคุณได้เนื่องจากเป็นคุณสมบัติ TS

คุณสามารถทำสิ่งนี้:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

โปรดทราบว่าเส้นทางที่คุณต้องการอ้างถึงจะใช้ baseUrl ของคุณเป็นฐานของเส้นทางที่คุณกำลังชี้ไปและเป็นข้อบังคับตามที่อธิบายไว้ในเอกสาร

อักขระ '@' ไม่ได้บังคับ

หลังจากที่คุณตั้งค่าในแบบนั้นคุณสามารถใช้มันได้อย่างง่ายดาย:

import { Yo } from '@config/index';

สิ่งเดียวที่คุณอาจสังเกตเห็นคือ Intellisense ไม่ทำงานในเวอร์ชันล่าสุดดังนั้นฉันขอแนะนำให้ทำตามระเบียบดัชนีสำหรับการนำเข้า / ส่งออกไฟล์

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

คุณสามารถใช้การรวมกันของbaseUrlและเอกสารpaths

สมมติว่ารูทนั้นใช้งานsrcdir (และฉันอ่านภาพของคุณอย่างถูกต้อง)

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

สำหรับwebpackคุณยังอาจต้องเพิ่มความละเอียดของโมดูล สำหรับwebpack2สิ่งนี้อาจมีลักษณะเช่น

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}

ตรวจสอบโซลูชันที่คล้ายกันนี้ด้วยเครื่องหมายดอกจัน

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },

คำตอบ Alejandros ใช้งานได้สำหรับฉัน แต่เมื่อฉันใช้awesome-typescript-loaderกับ webpack 4 ฉันก็ต้องเพิ่มtsconfig-paths-webpack-pluginไฟล์ webpack.config ของฉันเพื่อให้แก้ไขได้อย่างถูกต้อง

หากคุณกำลังใช้เส้นทางที่คุณจะต้องเปลี่ยนเส้นทางกลับแน่นอนทางญาติให้มันทำงานหลังจากรวบรวม typescript tscเข้าจาวาสคริปต์ธรรมดาใช้

โซลูชันที่ได้รับความนิยมมากที่สุดสำหรับสิ่งนี้ได้รับเส้นทาง tsconfigจนถึง

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

ดังนั้นผมเขียนวิธีการแก้ปัญหาตัวเองtscpaths

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

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

หากใช้ typescript + webpack 2 + at-loader จะมีขั้นตอนเพิ่มเติม (โซลูชันของ @ mleko นั้นใช้งานได้เพียงบางส่วนเท่านั้น):

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

การแก้ไขพา ธ ขั้นสูงใน TypeScript 2.0

สิ่งนี้ใช้ได้กับฉัน:

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

สิ่งนี้จะโหลดพา ธ ทั้งหมดใน tsconfig.json ตัวอย่าง tsconfig.json:

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

ตรวจสอบให้แน่ใจว่าคุณมีทั้ง baseUrl และพา ธ เพื่อให้ใช้งานได้

จากนั้นคุณสามารถนำเข้าเช่น:

import {AlarmIcon} from 'assets/icons'

ชนิดของเส้นทางสัมพัทธ์แทนที่จะเป็นรหัสด้านล่าง

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

เราสามารถหลีกเลี่ยง "../../../../../" มันดูแปลกและไม่สามารถอ่านได้เช่นกัน

ดังนั้นไฟล์กำหนดค่า typescript จะมีคำตอบเหมือนกัน เพียงระบุ baseUrl การตั้งค่าจะดูแลเส้นทางที่เกี่ยวข้องของคุณ

วิธีปรับแต่ง:ไฟล์ tsconfig.json เพิ่มคุณสมบัติด้านล่าง

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

ดังนั้นในที่สุดมันก็จะดูเหมือนด้านล่าง

import { Something } from "@app/src/[browser/server/universal]/...";

มันดูเรียบง่ายน่ากลัวและอ่านง่ายขึ้น ..

ชำระเงินการดำเนินการคอมไพเลอร์โดยใช้สิ่งนี้

ฉันได้เพิ่ม baseUrl ในไฟล์สำหรับโครงการด้านล่าง:

"baseUrl": "src"

มันทำงานได้ดี ดังนั้นเพิ่มไดเรกทอรีฐานของคุณสำหรับโครงการของคุณ

/เริ่มต้นจากรูตเท่านั้นเพื่อให้ได้พา ธ สัมพัทธ์ที่เราควรใช้./หรือ../

ดูเหมือนว่ามีการอัปเดตเป็น React ที่ไม่อนุญาตให้คุณตั้งค่า"paths"ในtsconfig.jsonanylonger

ตอบสนองอย่างดีเพียงแค่ส่งคำเตือน:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

จากนั้นอัปเดตtsconfig.jsonและลบ"paths"ส่วนทั้งหมดให้คุณ มีวิธีที่จะหลีกเลี่ยงการวิ่งครั้งนี้

npm run eject

สิ่งนี้จะนำการcreate-react-scriptsตั้งค่าทั้งหมดออกโดยการเพิ่มconfigและscriptsไดเรกทอรีและสร้าง / กำหนดค่าไฟล์ในโครงการของคุณ นอกจากนี้ยังช่วยให้สามารถควบคุมทุกอย่างที่สร้างขึ้นชื่อ ฯลฯ โดยการอัพเดต{project}/config/*ไฟล์

จากนั้นอัปเดตของคุณ tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}