Совместное использование файла между commonjs и ejs, Typescript не является модулем .ts (2306) в файле commonjs

Я только что обнаружил, что если файл является .json файлом с правильным форматом JSON, его можно использовать как в ES6 (import), так и в CommonJS (require).

Согласно этому ответу (и эта статья), для ES6 вам нужно включить "resolveJsonModule": true, в tsconfig.json, и тогда вы можете иметь контент в обоих форматах.

Итак, если файл content.json имеет следующее содержимое (без комментариев или чего-либо еще):

{
   "age": 34
}

тогда у нас будет ...

import * as jsonContent from "../../content.json"

console.log(jsonContent.age); // prints out 34

а также

const jsonContent = require("../../content.json");

console.log(jsonContent.age); // prints out 34

Они оба успешно распечатывают контент!

Я нашел решение, однако синтаксис импорта в мире commonjs не самый приятный, но я надеюсь, что он вам пригодится.

Вы не предоставили никакой информации о том, как настраиваются ваши проекты, кроме указания импорта в стиле commonjs и es6, поэтому я здесь рискую. Также стоит отметить, что при включении файлов работало, при использовании импорта в стиле commonjs они были набраны, а не сохранены их типы машинописного текста (мне не удалось набрать текст с использованием импорта в стиле commonjs (требуется) - я не использовал этот импорт синтаксис на некоторое время, поэтому правильные параметры tsconfig.json, чтобы заставить его работать, ускользнули от меня).

Я переместил общий код в собственный проект и скомпилировал его со следующими настройками tsconfig:

Общий tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "lib": [ "ES5" ],
    }
}

Shared.ts:

export default {'a': 1, 'b': 2};

Shared.js (вывод):

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = { 'a': 1, 'b': 2 };

(Обратите внимание, что этот вывод выполнен в стиле commonjs, потому что ES6 совместим с файлами commonjs).

При использовании require напрямую вам необходимо указать переменную .default в импортированном файле:

commonjs.ts

var val = require("../shared/shared").default;

console.log(val);

Однако, если вы настроены так, что можете писать импорт и вывод в стиле ES6 в commonjs, вы можете вместо этого использовать следующий синтаксис (это предоставит вам информацию для ввода):

commonjs.ts

import val from "../shared/shared";

console.log(val);

Оба вышеуказанных файла были скомпилированы с использованием следующего tsconfig:

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "lib": [ "es5" ],
        "types": ["node"]
    }
}

Импорт ES6 довольно прост:

es6.ts

import shared from "../shared/shared";

console.log(shared);

tsconfig.json:

{
    "compilerOptions": {
        "module": "ES6",
        "target": "es6",
        "lib": [ "es6" ]
    }
}

У меня есть скрытое подозрение, что это не на 100% решает вашу проблему, но мне понадобятся ваши настройки tsconfig для каждого проекта в качестве версии компилятора машинописного текста, который вы используете для каждого проекта, чтобы дать более точный ответ.

Я немного поэкспериментировал и сделал другое решение, которое вы могли бы предпочесть.

Я до сих пор не понял, как набирать текст при импорте в стиле common-js, но импорт работает при запуске и не вызывает ошибок компилятора.

Я переместил общий код в собственный проект и скомпилировал его в другой каталог. Это связано с тем, что флаг esModuleInterop не работает при импорте файла машинописного текста, поэтому вместо этого я скомпилировал файл javascript с поддерживающим файлом .d.ts в другой каталог, чтобы исходный файл .ts не вызывал конфликта.

Общий tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "lib": [ "ES5" ],
        "declaration": true,
        "outDir": "../sharedOut"
    }
}

Shared.ts:

export = {'a': 1, 'b': 2};

И в выходной папке у вас должно получиться:

Shared.js:

"use strict";
module.exports = { 'a': 1, 'b': 2 };

Shared.d.ts

declare const _default: {
    a: number;
    b: number;
};
export = _default;

В результате импорт commonjs будет выглядеть так:

commonjs.ts

var val = require("../sharedOut/shared");

console.log(val);

или (если вы можете использовать импорт в стиле ES6, но хотите, чтобы вывод был commonjs):

import val from "../sharedOut/shared";

console.log(val);

Оба вышеуказанных файла были скомпилированы с использованием следующего tsconfig:

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "lib": [ "es5" ],
        "types": ["node"],
        "esModuleInterop": true
    }
}

Импорт ES6 (снова) довольно прост:

es6.ts

import shared from "../shared/shared";

console.log(shared);

tsconfig.json:

{
    "compilerOptions": {
        "module": "ES6",
        "target": "es6",
        "lib": [ "es6" ],
        "esModuleInterop": true
    }
}

Опять же, если это не решит вашу проблему, мне понадобится дополнительная информация для прогресса. Мне потребуются ваши настройки tsconfig для каждого проекта в качестве версии компилятора машинописного текста, который вы используете для каждого проекта, чтобы дать более точный ответ.