typescript - Bootstrap4 ტიპები (index.d.ts) ვერ პოულობს მოდულს 'popper.js' VisualStudio 2019-ში TypeScript 3.9 და Libman-თან ერთად

მე ვიყენებ VisualStudio 2019-ს TypeScript3.9-სა და Libman-თან ერთად.

და მე მჭირდება Bootstrap4 და jQuery. ასე რომ, სცადეთ ეს ბიბლიოთეკები და ტიპები (index.d.ts) მიიღოთ Libman-ის საშუალებით.

შემდეგ Bootstrap4-მა typing (index.d.ts) დააფიქსირა შეცდომა „Cannot find module popper.js“.

// Type definitions for Bootstrap 4.5
// Project: https://github.com/twbs/bootstrap/, https://getbootstrap.com
// Definitions by: denisname <https://github.com/denisname>
//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3

/// <reference types="jquery"/>

import * as Popper from "popper.js";     // ERROR!: "Cannot find module popper.js"

მე შევნიშნე მსგავსი პრობლემები და პასუხები.

Bootstrap 4 TypeScript ტიპის განსაზღვრის კომპილაცია ვერ ხერხდება - მოდული 'popper.js' ვერ მოიძებნა
მოდიული "popper.js" ვერ მოიძებნა Angular 5 Visual Studio 2017 asp.net core
Angular @types/bootstrap შეცდომა: ნეიმსფეისი 'popper.js'-ს არ აქვს ექსპორტირებული წევრი

ეს მხოლოდ დროებით შეძლებდა პრობლემის მოგვარებას.

მე შევაცვლე bootstrap4-ის ტაიფინგი (index.d.ts) რელატიურ გზაზე, როგორც import * as Popper from "../popper_v1";, ეს შეცდომა გამოსწორდა. მაგრამ Libman გადაულახავს ამ მანუალურად შეცვლილ index.d.ts-ს.

რა შემიძლია გავაკეთო ამ შეცდომის გასასწორებლად? ხომ არ მიწევს index.d.ts-ის ხელით მოდიფიცირებული ვერსიის ინსტალაცია, როგორც Popper v1.X-ში?

გმადლობთ.

შეცდომის გამეორების ნაბიჯები.

შექმენით ASP.Net4 MVC პროექტი .Net Framework 4.8-ზე
შექმენით libman.json რამდენიმე ბიბლიოთეკისა და TS ტიპების დასამატებლად

{
  "version": "1.0",
  "defaultProvider": "jsDelivr",
  "libraries": [
    {
      "library": "[email ",
      "destination": "lib/bootstrap/"
    },
    {
      "library": "@types/[email ",
      "destination": "lib/types/bootstrap/"
    },
    {
      "library": "[email ",
      "destination": "lib/jquery/",
      "files": [
        "dist/jquery.js",
        "dist/jquery.min.js",
        "dist/jquery.min.map",
        "dist/jquery.slim.js",
        "dist/jquery.slim.min.js",
        "dist/jquery.slim.min.map",
        "external/sizzle/LICENSE.txt",
        "external/sizzle/dist/sizzle.js",
        "external/sizzle/dist/sizzle.min.js",
        "external/sizzle/dist/sizzle.min.map",
        "AUTHORS.txt",
        "LICENSE.txt",
        "README.md"
      ]
    },
    {
      "library": "@types/[email ",
      "destination": "lib/types/jquery/"
    },
    {
      "library": "@types/[email ",
      "destination": "lib/types/sizzle/"
    },
    {
      "provider": "cdnjs",
      "library": "[email ",
      "destination": "lib/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "lib/types/popper_v1/"
    }
  ]
}

** შენიშვნა: მე მივიღე popper.js ვერსია 1.X-ის typing(index.d.ts) GitHub-დან.

შექმენით tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "lib": [ "ES6", "DOM" ],
    "baseUrl": ".",
    "typeRoots": [
      "./lib/types"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "lib"
  ]
}

ამ ნაბიჯების შემდეგ, bootstrap4 ტიპირება (index.d.ts) მიიღებს შეცდომას „Cannot find module popper.js“ import * as Popper from "popper.js"; ხაზზე.

პასუხი #1

მე ვიპოვე ორი ნიმუში გასასწორებლად.

შეცვალეთ tsconfig.json-ის პარამეტრები, რათა კომპილატორმა შეძლოს „lib“ დირექტორიის მოძებნა.
ბიბლიოთეკების დირექტორიის სახელის შეცვლა Libman-ის მეშვეობით "node_modules"(არ არის რეკომენდებული).

ეს პრობლემა გამოწვეულია მრავალი მიზეზით.

TypeScript-ის ნაგულისხმევი მოდულის მართვის მექანიზმი დაფუძნებულია node.js-ზე.
Libman სტანდარტულად იყენებს "lib" დირექტორიას ბიბლიოთეკების განთავსებისთვის.
ბიბლიოთეკის დირექტორიების სახელები უნდა ემთხვეოდეს ModuleName-თან.

[მიზნები]

1. TypeScript-ის მოდულების მართვის მექანიზმი ეფუძნება node.js-ს.

ჩემი tsconfig.json შეიცავს "target": "ES5". და არ აქვს "module" თვისება.

ეს განსაზღვრავს "module" თვისებას როგორც სტანდარტულს. ხოლო "ES5" მიზნის შემთხვევაში, სტანდარტული არის "CommonJS".

შემდეგ, "moduleResolution"-ის თვისებაც არ აქვს. ასე რომ "module": "CommonJS" ქმნის "moduleResolution" თვისებას "Node"-ის.

კი, კომპილატორი იყენებს „Node“ მოდულის გარჩევის სისტემას.

> „Node“ რეზოლუციის სისტემა TypeScript 3.9-ში

ამ სახელმძღვანელო წერს, რომ არაპოზიციონალური იმპორტი (მაგალითად import * from "banana") გამოძიებას გაუწევს "node_modules" დირექტორიას რეკურსიულად (მშობლის მიმართულებით).

კი, დირექტორია უნდა სახელდებულიყო როგორც „node_modules“.

სხვა შემთხვევაში ვიყენებთ Libman-ს, მაგრამ ყველაზე ბოლო TypeScript-ის ძირითადი თეორია დაფუძნებულია "node.js"-ზე!
და "კლასიკური" რეზოლუციის სისტემა არის ძველი და უვარგისი.

ბოლოს, საჭიროა tsconfig.json-ის შეცვლა იმისთვის, რომ მოძებნოს ჩვენი „lib“ დირექტორია. ან შეცვალეთ დირექტორიის სახელი „node_modules“-ად, რათა მოარგოთ „Node“-ის განლაგების სისტემას (არ არის რეკომენდებული. ჩვენ ვამოწმენდ Libman-ს, არა node-ს).

2. ლიბმანი იყენებს "lib" დირექტორიას ბიბლიოთეკების დაყენებისათვის სტანდარტულად.

როგორც მიზეზი 1, ჩვენ გვჭირდება "node_modules" დირექტორია. მაგრამ libman-ის სტანდარტული დირექტორიის სახელი არის "lib".

ეს მიზეზი კომპილატორს არ აძლევს საშუალება ეძიონ ბიბლიოთეკები „lib“ დირექტორიაში.

3. ბიბლიოთეკის დირექტორიების სახელები უნდა ემთხვეოდეს ModuleName-ს.

თუ არატანარიცული იმპორტი გამოიყენება (მაგ. import * from "banana"), კომპილატორი ეძებს "./node_modules/banana.js(ts)" ან "./node_modules/banana/*".

ჩემი libman.config-ში არის popper.js ვერსიის 1.X ტიპიზაცია (.d.ts).

{
  "provider": "filesystem",
  "library": "lib_ManualInstallSources/popper_v1/",
  "destination": "lib/types/popper_v1/"
}

დიახ... ჩემი "desitination" თვისება არის "popper_v1".

ეს არასწორედ სახელწოდებულია. import * as Popper from "popper.js" ვერ პოულობს ამ დირექტორიას. საჭიროა დირექტორიის სახელის შეცვლა "lib/types/popper.js"-ში.

[როგორ შევასწოროთ]

მე ვიპოვე ორი ნიმუში გასასწორებლად.

შეცვალეთ tsconfig.json-ის პარამეტრები, რათა კომპილატორმა შეძლოს „lib“ დირექტორიის მოძებნა.
ბიბლიოთეკების საქაღალდის სახელის ცვლილება Libman-ის საშუალებით "node_modules"-ზე (არ არის რეკომენდებული).

მთავარ არჩევანს ვთავაზობ ვიყენოთ 1. იმიტომ, რომ ჩვენ ვხმარობთ Libman-ს, არა Node-ს. თუ ვნახავთ „node_modules“ დირექტორიას, ეს იწვევს მცდარ წარმოდგენას, რომ ჩვენ ვიყენებთ Node-ს.

თუმცა, მისი შეცვლისას "node_modules"-ზე, საერთო კონფიგურაცია შეიძლება უფრო მარტივად გამოიყურებოდეს.

1. შეცვალეთ tsconfig.json პარამეტრები ისე, რომ კომპილატორმა შეძლოს „lib“ დირექტორიის ძიება.

// tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "lib": [ "ES6", "DOM" ],
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types", // Default path to search typings.
      "./lib/types"            // Directory of typings that located by Libman.
    ],
    "paths": {
      // If absolute module name provided on .ts/.d.ts files, compiler will check "./lib/moduleName", "./lib/types/moduleName".
      // e.g. 'import * as Popper from "popper.js"' is convert to "./lib/popper.js" and "./lib/types/popper.js".
      //      Then "./lib/types/popper.js" is correctly path. Error fixed.
      "*": [ "lib/*", "lib/types/*" ]
    }
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "lib"
  ]
}

// libman.json
{
  "version": "1.0",
  "defaultProvider": "jsDelivr",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "[email ",
      "destination": "lib/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "lib/types/popper.js/"
    },
    {
      "library": "[email ",
      "destination": "lib/bootstrap/"
    },
    {
      "library": "@types/[email ",
      "destination": "lib/types/bootstrap/"
    },
    {
      "library": "[email ",
      "destination": "lib/jquery/",
      "files": [
        "dist/jquery.js",
        "dist/jquery.min.js",
        "dist/jquery.min.map",
        "dist/jquery.slim.js",
        "dist/jquery.slim.min.js",
        "dist/jquery.slim.min.map",
        "external/sizzle/LICENSE.txt",
        "external/sizzle/dist/sizzle.js",
        "external/sizzle/dist/sizzle.min.js",
        "external/sizzle/dist/sizzle.min.map",
        "AUTHORS.txt",
        "LICENSE.txt",
        "README.md"
      ]
    },
    {
      "library": "@types/[email ",
      "destination": "lib/types/jquery/"
    },
    {
      "library": "@types/[email ",
      "destination": "lib/types/sizzle/"
    }
  ]
}

2. შეცვალეთ ბიბლიოთეკების დირექტორიის სახელი Libman-ის საშუალებით „node_modules“-ში (არ საპროცენტოდ რეკომენდებულია).

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "lib": [ "ES6", "DOM" ],
    "baseUrl": "."
  },
  "exclude": [
    "node_modules",
    "wwwroot",
    "lib"
  ]
}

{
  "version": "1.0",
  "defaultProvider": "jsDelivr",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "[email ",
      "destination": "node_modules/popper.js/"
    },
    {
      "provider": "filesystem",
      "library": "lib_ManualInstallSources/popper_v1/",
      "destination": "node_modules/types/popper.js/"
    },
    {
      "library": "[email ",
      "destination": "node_modules/bootstrap/"
    },
    {
      "library": "@types/[email ",
      "destination": "node_modules/types/bootstrap/"
    },
    {
      "library": "[email ",
      "destination": "node_modules/jquery/",
      "files": [
        "dist/jquery.js",
        "dist/jquery.min.js",
        "dist/jquery.min.map",
        "dist/jquery.slim.js",
        "dist/jquery.slim.min.js",
        "dist/jquery.slim.min.map",
        "external/sizzle/LICENSE.txt",
        "external/sizzle/dist/sizzle.js",
        "external/sizzle/dist/sizzle.min.js",
        "external/sizzle/dist/sizzle.min.map",
        "AUTHORS.txt",
        "LICENSE.txt",
        "README.md"
      ]
    },
    {
      "library": "@types/[email ",
      "destination": "node_modules/types/jquery/"
    },
    {
      "library": "@types/[email ",
      "destination": "node_modules/types/sizzle/"
    }
  ]
}