Typescript переносит зависимость es6 .js к es5 - PullRequest
Новая
       12

Typescript переносит зависимость es6 .js к es5

0 голосов
/ 29 апреля 2018

У меня есть гипотетический файл Typescript в моем проекте (упрощенный пример).

Utils.ts 

import * as HelperFromNodeModules from 'helper-from-node-modules';

class Utils {
  static foo() {
    return HelperFromNodeModules.parse(...);
  }
}

Импорт helper-from-node-modules состоит из файла Javascript.

хелперов с узлами-modules.js 

const dep = require('foo');
function parse(...) {
   return bar.map((e) => {...});
}

А из @types/helper-from-node-modules index.d.ts : 

export function parse(...);

В tsconfig.json среди прочего содержится следующее: 

{
  ...
  "target": "es5",
  "lib": ["es2015.collection","es6", "dom"],
  "sourceMap": true,
  "allowJs": true,
  ...
}

Так что моя проблема в том, что выходной файл компилятора Typescript представляет собой гигантскую конкатенацию моего скомпилированного исходного кода плюс все приличия. Поскольку helper-from-node-modules всегда был файлом .js , компилятор, кажется, просто добавляет его содержимое в выходной файл. Таким образом, несмотря на "target": "es5", выходной файл по-прежнему содержит es6 артефактов, таких как const и (e) => {...}, что приводит к ошибкам с вещами позже, которые строго ожидают es5 javascript.

Есть ли способ заставить компилятор / транспортер Typescript выводить es5 также на зависимости javascript?

Контекст, если вам важно:

Я совершил ужасную ошибку, используя react-create-app-typescript и react-scripts-ts в качестве шаблона для моего приложения React. Встроенный стек веб-пакетов очень очень уверен в том, откуда должен исходить код, и что скомпилированный источник должен быть es5 . Упакованный минификатор / увеличитель завершится сбоем, если попытаться минимизировать любые es6 артефактов. Я знаю, что могу запустить npm run-script eject и изменить различные конфигурационные скрипты, но я стараюсь избежать этого беспорядка. Мне бы очень хотелось, чтобы исходный код компилировался в es6 , а не связывался с их стеком веб-пакетов.

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Единственное, что мне приходит в голову, это подключиться к процессу компиляции и преобразовать ваши зависимости до их обработки в TypeScript. Для этого требуется преобразователи TypeScript .

Преобразователь - это функция, которой подвергается AST вашей программы. Базовый пример: 

import * as ts from 'typescript';

export default (program: ts.Program) => {
    return (ctx: ts.TransformationContext) => {
        return (sourceFile: ts.SourceFile) => {
            function visitor(node: ts.Node): ts.Node {
                /**
                 * If that's the kind of node you were looking for,
                 * do something with it and return it. Otherwise:
                 */
                return ts.visitEachChild(node, visitor, ctx);
            }

            return ts.visitEachChild(sourceFile, visitor, ctx);
        };
    };
}

Если вы используете Webpack, вы можете подключить его к конвейеру сборки в файле конфигурации Webpack.

webpack.config.js

const transformer = require('./your-custom-transformer');

module.exports = {
  /* ... */
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader', // (or 'awesome-typescript-loader')
        options: {
          getCustomTransformers: program => ({
            before: [
              transformer(program)
            ]
          })
        }
      }
    ]
  }
};
0 голосов
/ 30 апреля 2018

К сожалению, нет способа конвертировать зависимости из ES6 в ES5. Эта опция в tsconfig.json влияет только на то, как передается код TypeScript. Что вы должны сделать, это использовать версию ES5 вашего helper-from-node-modules. Например, Angular распространяется с несколькими пакетами, для ES5 (umd), ES5, ES6 ... Затем в package.json библиотеки есть опции, чтобы сообщить упаковщику (обычно веб-пакет), какую версию использовать, в зависимости от целевое использование для TypeScript.

Если используемая вами библиотека не поддерживает это, единственный вариант, который у вас есть, - это перенести его на ES5 самостоятельно, возможно, с помощью babel, или использовать альтернативу. Однако странно, что библиотека распространяется только как ES6.

...