TypeScript - קימפול מספר קבצים לקובץ אחד

[קומפיונט]

אני כותב סקריפט לאינדזיין בעזרת types-for-adobe ואני מעוניין לפצל את הקוד לכמה קבצי ts. שונים וש - tsc יקמפל את כל הקבצים לקובץ אחד, האם זה אפשרי?
זה קובץ ה - tsconfig.json

{
  "compilerOptions": {
    "module": "none",
    "noLib": true
  }
}

השגיאה שאני מקבל כרגע היא:

error TS1148: Cannot use imports, exports, or module augmentations when '--module' is 'none'

[dovid]

לזכרוני לאחד קבצים זה תפקידו של כלי "packing", למשל כולם (angular react vue) משתמשים בwebpack.
אני חושב הוא גם כולל כל מיני פעולות ביניים כמו טרנספילציה.

[קומפיונט]

לבסוף מצאתי איזה ריפו ישן ב - GitHub שעל פיו הוספתי את הקבצים הבאים:

// webpack.config.js

const path = require("path");

module.exports = {
    entry: "./src/index",
    mode: "production",
    output: {
        globalObject: "this",
        path: path.resolve(__dirname, "dist"),
        filename: "drop-word-script.js",
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)$/,
                loader: "babel-loader",
                options: {
                    presets: [["@babel/preset-env", { loose: true, modules: "commonjs" }], "@babel/preset-typescript"],
                },
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    optimization: {
        minimize: false, // minification may produce syntax errors because ExtendScript does not support nested ternary operators without parentheses
    },
    target: "browserslist",
};

// tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "noEmit": true,
    "skipLibCheck": true,
    "types": [
      "types-for-adobe/InDesign/2021"
    ]
  },
}

// package.json

{
  "name": "drop-word-script",
  "version": "1.0.0",
  "main": "dist/drop-word-script.js",
  "scripts": {
    "build": "npm run check-types && npm run build:bundle",
    "build:bundle": "webpack",
    "build:compile": "npx jsxbin -i dist/drop-word-script.js -o dist/drop-word-script.jsxbin",
    "check-types": "tsc --noEmit"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.4",
    "@babel/preset-typescript": "^7.24.7",
    "babel-loader": "9.1.3",
    "jsxbin": "^2.2.0",
    "types-for-adobe": "^7.2.1",
    "typescript": "^5.6.2",
    "webpack": "^5.94.0",
    "webpack-cli": "^5.1.4"
  }
}

// .browserslistrc

ie 6

אשמח לשמוע אם יש מקום לשיפור

[צדיק תמים]

@dovid כתב בTypeScript - קימפול מספר קבצים לקובץ אחד:

למשל כולם (angular react vue) משתמשים בwebpack

כיום ב-Vite (האחראי שם על האריזה זה Rollup)

[dovid]

@קומפיונט מציע לבדוק את הכלי ש@צדיק-תמים כתב לך, ייתכן שזה all in one שיעשה לך חיים קלים.

[צדיק תמים]

Vite להבנתי הוא בדיוק באותו תפקיד של וובפאק, אלא שהוא לא מטרנספל הכל לקובץ אחד גדול אלא ממנף את ES Modules מה שמאפשר מהירות הזויה גם בהרצה ראשונית וגם בHot Reloading
פה שמדובר במשהו חד פעמי אין משמעות האם זה יקח 5 שניות או 40, רק ציינתי לגבי הפריימוורקים הגדולים שהם כבר עברו לזה.
@קומפיונט אתה יכול לבדוק את https://github.com/vercel/ncc

[yossiz]

vite זה הרבה דברים, החלק שרלוונטי לנושא פה הוא rollup (יש גם esbuild)
יש גם דגל של TS שאומר לארוז את כל הקבצים לקובץ אחד
אולי זה יספיק פה
https://www.typescriptlang.org/tsconfig/#outFile

[קומפיונט]

@yossiz כתב בTypeScript - קימפול מספר קבצים לקובץ אחד:

יש גם דגל של TS שאומר לארוז את כל הקבצים לקובץ אחד
אולי זה יספיק פה
https://www.typescriptlang.org/tsconfig/#outFile

ניסיתי את זה, אבל אני רואה שהמינימום האפשרי ב tsc זה es5, ו - extend script זה es3,
אז אני מבין שצריך להשתמש ב rollup או esbuild עם פלאגינים שמשלבים babel ו - typescript, אם יש למשהו דוגמת קוד לקונפיגורציה זה יעזור לי.

ואגב, למפרע אני מבין שנוסח השאלה שלי צריך להיות כך: "איך אורזים מספר קבצי ts. לקובץ js. בודד בסטנדרט es3?"

[קומפיונט]

הצלחתי בסוף להגדיר את rollup, והתוצאה נראית הרבה יותר טוב.
זה דוגמא לקובץ סופי (שמורכב משני קבצי ts) עם- rollup:

function showMessage(message) {
  alert(message);
}

showMessage("hello");

וככה הוא נראה עם - webpack:

/******/ (function() { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ 420:
/***/ (function(__unused_webpack_module, exports) {



exports.__esModule = true;
exports.showMessage = showMessage;
function showMessage(message) {
  alert(message);
}

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
var __webpack_exports__ = {};


var _dialogs = __webpack_require__(420);
(0, _dialogs.showMessage)("hello");
/******/ })()
;

זה הקונפיגורציה המינימאלית של rollup:

import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';

export default {
    input: 'src/index.ts',
    output: {
        file: 'dist/drop-word-script.js'
    },
    plugins: [
        typescript(),
        babel({
            babelHelpers: 'bundled',
            presets: [
                ['@babel/preset-env']
            ],
            extensions: ['.js', '.ts']
        })
    ],
};

[צדיק תמים]

זה ההוראות הרשמיות של Vite: ‫ https://vitejs.dev/guide/build.html#browser-compatibility
אם הגדרת את Rollup בעצמו זה גם מצויין, הרי כשאתה עושה build ב-Vite אתה סה"כ מפעיל את Rollup דרך התצורה והברירות מחדל של ‫Vite

The bundler behind Vite
Developing for the web? Vite pre-configures
Rollup for you with sensible defaults and
powerful plugins while giving you an insanely
fast development server.

אגב, לחלק של ההמרה מ-TypeScript ל-JavaScript ועוד כמה משימות טרנספלציה כמו JSX גם Vite משתמשת בesbuild, לחלק של הבניה הם משתמשים בRollup כי לטענתם ה-plugin API של esbuild לא מספיק גמיש