web-dev-qa-db-ja.com

Typescript transpile es6 .jsのes5への依存関係

プロジェクトに架空のTypeScriptファイルがあります（簡略化した例）。

Utils.ts：

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

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

helper-from-node-modulesのインポートは、Javascriptファイルで構成されています。

helper-from-node-modules.js：

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

そして@types/helper-from-node-modulesindex.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"にもかかわらず、出力ファイルにはconstや(e) => {...}などのes6アーティファクトが含まれているため、後で厳密に予期しているエラーが発生します。 es5javascript。

TypeScriptコンパイラ/トランスパイラーに、javascriptの依存関係についてもes5を出力するように指示する方法はありますか？

必要に応じてコンテキスト：

Reactアプリの定型文としてreact-create-app-TypeScriptとreact-scripts-tsを使用するという恐ろしい間違いを犯しました。組み込みのWebpackスタックはveryソースコードがどこから来るか、コンパイルされたソースはmustes5であると判断しました。パッケージ化されたminifier/uglifierは、 es6アーティファクトをすべて縮小します。npm run-script ejectを実行してさまざまな構成スクリプトを変更できることはわかっていますが、混乱を避けようとしています。ソースを取得したいだけです。 es6にコンパイルし、webpackスタックを台無しにしないでください。

javascripttypescriptecmascript-6tsconfigreact-create-app
12
Samuel Davidson

残念ながら、依存関係をES6からES5に変換する方法はありません。 tsconfig.jsonのそのオプションは、TypeScriptコードの変換方法にのみ影響します。あなたがすべきことは、あなたのhelper-from-node-modulesのES5バージョンを使うことです。たとえば、Angularは、ES5（umd）、ES5、ES6の場合、いくつかのパッケージで配布されます...次に、ライブラリのpackage.jsonには、パッケージャに通知するオプションがあります（通常はwebpack）TypeScriptのターゲットの用途に応じて、使用するバージョン。

使用しているライブラリがそれをサポートしていない場合は、自分でライブラリをES5にトランスパイルするか、おそらくbabelを使用するか、代替手段を使用するしかありません。しかし、ライブラリがES6としてのみ配布されるのは奇妙です。

5
Oscar Paz

私の頭に浮かぶのは、コンパイルプロセスにフックして依存関係を変換することbeforeが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)
            ]
          })
        }
      }
    ]
  }
};
1
Karol Majewski