Rollup-plugin-typescript2: डिक्लेरेशन फाइल्स में पाथ उर्फ ​​​​समाधान करें (d.ts)

टाइपस्क्रिप्ट लोगों के अनुसार, आप इसे पीछे की ओर उपयोग कर रहे हैं:

इस पर हमारा सामान्य विचार यह है कि आपको आयात पथ लिखना चाहिए जो रनटाइम पर काम करता है, और टीएस के लिए आउट-ऑफ-द-बॉक्स काम करने वाले आयात को लिखने के बजाय कंपाइलर के मॉड्यूल रिज़ॉल्यूशन चरण को पूरा करने के लिए अपने टीएस झंडे सेट करें और फिर कोशिश करें रनटाइम पर काम करने वाले पथों को "ठीक" करने के लिए कुछ अन्य कदम उठाने के लिए।

https://github.com/microsoft/TypeScript/issues/15479

वर्तमान में यह प्लगइन टाइपस्क्रिप्ट द्वारा उत्सर्जित होने के बाद प्रक्रिया या पार्स प्रकार की घोषणाओं को पोस्ट नहीं करता है।

खोज/प्रतिस्थापन की तुलना में कुछ बेहतर करना संभव हो सकता है, लेकिन सामान्य रूप से इसे हल करने के लिए हमें मूल रूप से प्रकार की घोषणाओं के लिए रोलअप को फिर से लागू करने की आवश्यकता होगी (जब तक कि वे पहले से ही बंडल घोषणाएं उत्पन्न करने के लिए भाषा सेवा एपीआई नहीं जोड़ रहे थे, जबकि मैं नहीं देख रहा था)

उत्तर के लिए धन्यवाद। क्या कोई "पोस्ट एमिट" हुक है जो वॉच और बिल्ड मोड दोनों पर चलता है जिसका उपयोग क्रूड सर्च/पोस्ट प्रोसेसिंग स्टेप को बदलने के लिए किया जा सकता है?

d.ts फ़ाइलें सीधे रोलअप पाइपलाइन में उत्सर्जित होती हैं (जब useTsconfigDeclarationDir: false विकल्प का उपयोग किया जाता है), तो आप एक रोलअप प्लगइन बना सकते हैं जो उन्हें बदल देता है।

वे जब बंडल हालांकि लिखा है उत्सर्जित हो, तो आप का उपयोग करना पड़ सकता है generateBundle के बजाय हुक transform ।

अगर वह काम नहीं करता है। मैं rpt2 में ही प्री-राइट हुक जोड़ सकता हूं।

एक ही समस्या का सामना करें, यहां एक वॉकअराउंड मिला
वर्तमान में उपयोग कर ttsc के साथ typescript-transform-paths , निरर्थक लेकिन काम करता है की तरह रोलअप उत्सर्जित ts फ़ाइलों के बाद घोषणा फ़ाइलें उत्पन्न करने के लिए ...

हाँ, मैं इसे ttsc का उपयोग करके भी प्राप्त कर रहा हूँ। मैं ट्रांसफॉर्मर को रोलअप-प्लगइन-टाइपस्क्रिप्ट2 transformers विकल्पों के साथ सीधे काम करने में असमर्थ था, इसलिए मैंने ttsc का उपयोग करने का विकल्प चुना

मेरी रोलअप कॉन्फ़िगरेशन इस तरह दिखती है:

import typescript from 'rollup-plugin-typescript2'

export default {
  input: `src/index.ts`,
  preserveModules: true,
  output: {
    format: 'esm',
    dir: './dist'
  },
  external: [],
  watch: {
    include: 'src/**',
  },
  plugins: [
    typescript({ 
      typescript: require('ttypescript'),
      tsconfigDefaults: {
        compilerOptions: {
          plugins: [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
          ]
        }
      }
    }),
  ],
}

धन्यवाद आदमी @alshdavid ! तुमने मेरी जान बचाई है! कल मेरे पास एक ही मुद्दा था और typescript-transform-paths का उपयोग करके मैंने इसे हल किया! धन्यवाद

// webpack.config.js
module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              compiler: 'ttypescript',
            },
          },
          {
            loader: require.resolve('react-docgen-typescript-loader'),
          },
        ],
        exclude: /(node_modules)/,
      },
    ],
  },

// tsconfig.json
compilerOptions: {
  "plugins": [
     { "transform": "typescript-transform-paths" },
     { "transform": "typescript-transform-paths", "afterDeclarations": true }
   ]
}

इस समाधान ने मेरे लिए अतीत में काम किया है, लेकिन मुझे अब कई स्थितियां मिल रही हैं जहां मुझे इस तरह की त्रुटि मिलती है:

UnhandledPromiseRejectionWarning: TypeError: अपरिभाषित की संपत्ति 'पाठ' नहीं पढ़ सकता है

अगर मैं उपनाम (और इन प्लगइन्स) का उपयोग करने से दूर जाता हूं तो यह बिना किसी समस्या के काम करता है। क्या किसी का कोई मुद्दा है?

इस समाधान ने मेरे लिए अतीत में काम किया है, लेकिन मुझे अब कई स्थितियां मिल रही हैं जहां मुझे इस तरह की त्रुटि मिलती है:

UnhandledPromiseRejectionWarning: TypeError: अपरिभाषित की संपत्ति 'पाठ' नहीं पढ़ सकता है

अगर मैं उपनाम (और इन प्लगइन्स) का उपयोग करने से दूर जाता हूं तो यह बिना किसी समस्या के काम करता है। क्या किसी का कोई मुद्दा है?

मेरे पास एक ही त्रुटि है

इस समाधान ने मेरे लिए अतीत में काम किया है, लेकिन मुझे अब कई स्थितियां मिल रही हैं जहां मुझे इस तरह की त्रुटि मिलती है:

UnhandledPromiseRejectionWarning: TypeError: अपरिभाषित की संपत्ति 'पाठ' नहीं पढ़ सकता है

अगर मैं उपनाम (और इन प्लगइन्स) का उपयोग करने से दूर जाता हूं तो यह बिना किसी समस्या के काम करता है। क्या किसी का कोई मुद्दा है?

नमस्ते, मैं एक ही समस्या जारी कर रहा हूं, लेकिन एक अलग संदर्भ में: मैं Vue और टाइपस्क्रिप्ट के साथ लिखे गए एक घटक पुस्तकालय को बंडल करने के लिए रोलअप का उपयोग कर रहा हूं। यह rollup.config.js फ़ाइल है:

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import css from "rollup-plugin-css-only";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "./src/index.ts",
    preserveModules: true,
    output: {
      format: "esm",
      dist: "./dist"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "./src/") }
      }),
      css({ output: "dist/bundle.css" }),
      scss(),
      typescript({
        typescript: require("ttypescript"),
        tsconfigDefaults: {
          compilerOptions: {
            plugins: [
              { transform: "typescript-transform-paths" },
              {
                transform: "typescript-transform-paths",
                afterDeclarations: true
              }
            ]
          }
        }
      }),
      vue({ css: false })
    ]
  }
];

मैं पहले से ही ttsc --emitDeclarationOnly कमांड का उपयोग rollup --config एक के बाद उपनामों को हल करने के लिए करता हूं, लेकिन रोलअप द्वारा उत्पन्न .vue.d.ts फ़ाइलों को संसाधित नहीं किया जाता है (बेशक)।

ttypescript और typescript-transofrm-paths साथ एक ही समस्या, यह काम नहीं किया: निराश। निर्माण चलाते समय:

[!] (plugin rpt2) TypeError: Cannot read property 'text' of undefined

लेकिन @zerollup/ts-transform-paths और ttypescript यह काम करता है

यहां एक शानदार सेटअप है: https://www.npmjs.com/package/@zerollup/ts -transform-paths#setup-for-rollup-plugin-typescript2

_रोलअप.config.js_

import ttypescript from 'ttypescript'
import tsPlugin from 'rollup-plugin-typescript2'

export default {
    input: 'src/lib.ts',
    output: [{ file : 'dist/lib.js', name : 'mylib', format : 'iife', sourcemap : true }],
    plugins: [
        tsPlugin({
            typescript: ttypescript
        })
    ]
}

_tsconfig.json_

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "my-lib/*": ["src/*"]
        },
        "plugins": [
            {
                "transform": "@zerollup/ts-transform-paths",
                "exclude": ["*"]
            }
        ]
    }
}

वाह् भई वाह! मैंने एक अलग तरीके से हल किया, लेकिन यह इस प्लगइन से संबंधित नहीं है। मैंने टाइपस्क्रिप्ट-ट्रांसफॉर्म-पथ और टाइपस्क्रिप्ट को हटा दिया और वर्तमान प्लगइन को छोड़ दिया (टाइपस्क्रिप्ट ())। मैंने समस्या को हल करने के लिए रोलअप के बाद tsc-alias का उपयोग किया। यह vue फ़ाइलों को भी बदल देता है क्योंकि यह .d.ts फ़ाइलों को उनकी पीढ़ी के बाद संसाधित करता है।

मैंने समस्या को हल करने के लिए रोलअप के बाद tsc-alias उपयोग किया। यह vue फ़ाइलों को भी बदल देता है क्योंकि यह .d.ts फ़ाइलों को उनकी पीढ़ी के बाद संसाधित करता है।

@mantlebee क्या आप अपने tsconfig.json साथ-साथ अपने रोलअप कॉन्फ़िगरेशन का एक उदाहरण पोस्ट करना चाहते हैं?

लेकिन @zerollup/ts-transform-paths और ttypescript यह काम करता है

@luanorlandi रनटाइम पर ts-transform-path काम नहीं करता है? शायद पुस्तकालय कोड के लिए एक अच्छा विचार नहीं है।

मैंने समस्या को हल करने के लिए रोलअप के बाद tsc-alias उपयोग किया। यह vue फ़ाइलों को भी बदल देता है क्योंकि यह .d.ts फ़ाइलों को उनकी पीढ़ी के बाद संसाधित करता है।

@mantlebee क्या आप अपने tsconfig.json साथ-साथ अपने रोलअप कॉन्फ़िगरेशन का एक उदाहरण पोस्ट करना चाहते हैं?

महत्वपूर्ण गुण हैं declaration , declarationDir और outDir

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist/src",
    "baseUrl": ".",
    "outDir": "dist/src",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

सरल rollup.config.js फ़ाइल

import path from "path";

import alias from "@rollup/plugin-alias";
import cleaner from "rollup-plugin-cleaner";
import scss from "rollup-plugin-scss";
import typescript from "rollup-plugin-typescript2";
import vue from "rollup-plugin-vue";

export default [
  {
    input: "src/index.ts",
    output: {
      format: "esm",
      file: "dist/elegere-ui.js"
    },
    plugins: [
      cleaner({ targets: ["dist/"] }),
      alias({
        resolve: [".ts", ".vue"],
        entries: { "@/": path.resolve(__dirname, "src/") }
      }),
      scss(),
      typescript({
        useTsconfigDeclarationDir: true
      }),
      vue()
      //{ css: false }
    ]
  }
];

फिर मैंने सब कुछ prepublishOnly कमांड में डाल दिया (सिर्फ इसलिए कि यह मेरे लिए उपयोगी है)

"prepublishOnly": "npm run rollup && tsc-alias && npm run docs"

TSC-ALIAS dist/src फ़ोल्डर के अंदर प्रतिस्थापन करेगा; मैं सब कुछ उसके अंदर रखना चुनता हूं क्योंकि ts-alias उपनामों को src फ़ोल्डर के अंदर होने की सोच को बदल देगा।

इष्टतम निष्कर्ष नहीं है, लेकिन यह काम करता है। मैं @luanorlandi asap से समाधान की जांच

बेशक, dist/src फ़ोल्डर से बचने के लिए हर दूसरे lib को कॉन्फ़िगर किया जाना चाहिए, जैसे jest

लेकिन @zerollup/ts-transform-paths और ttypescript यह काम करता है

@luanorlandi रनटाइम पर ts-transform-path काम नहीं करता है? शायद पुस्तकालय कोड के लिए एक अच्छा विचार नहीं है।

मुझे ऐसा नहीं लगता, ट्रांसफॉर्मर सिर्फ बिल्ड स्टेप के लिए है, जैसा कि लाइब्रेरी इसका वर्णन करती है:

_...tsconfig baseUrl + पथ उर्फ ​​पुनर्लेखन बंडलों और घोषणा फ़ाइलों में। उन सभी को ट्रांसपिल्ड जेएस और डीटीएस फाइलों में रिश्तेदार को फिर से लिखा जाएगा।_

https://www.npmjs.com/package/@zerollup/ts -transform-paths