Typeescript内蔵のモジュール導入互換方式

私の公開番号 Talkに注目してください.最新の記事を取得します.
はじめに
フロントエンドのモジュール化仕様は、commonJS、AMD、CMD、ES6、およびAMDを含む.CMDおよびcommonJSは、過渡期の産物ともいえるが、現在は比較的一般的であるES6およびes5である.TSにおけるこれらの2つのモジュール化スキームの混用は、しばしばいくつかの予期せぬ問題が発生する.
二、import*as
互換性を考慮して、コードをtsconfig.json規格にコンパイルします.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
  }
}

コードコンパイル後は最終的にcommonJSとして出力されます.Reactを使う時、このような書き方はimport React from "react"に意味不明なエラーが発生します.

Module "react" has no default export

この時はコードをこのように変更するしかありません.import * as React from "react".その理由を追求すると、ReactはcommonJSの仕様で導出され、import React from "react"はこのような書き方でReactモジュールのexports.defaultを探し、Reactはこの属性を導出していないので、上記のようなエラーを報告した.import * as Reactの書き方はmodule.exportsの中の値を取っています.このように使うと何の問題もありません.Reactモジュールから導出されたコードはどのようなものかを見てみましょう.

...
var React = {
  Children: {
    map: mapChildren,
    forEach: forEachChildren,
    count: countChildren,
    toArray: toArray,
    only: onlyChild
  },

  createRef: createRef,
  Component: Component,
  PureComponent: PureComponent,
  ...
}

module.exports = React;

Reactが導出したのはオブジェクトであり、自然にdefaultの属性もないことがわかる.
二、esModuleInterop
このような場合に対応するために、TSは構成項esModuleInteropおよびallowSyntheticDefaultImportsを提供し、加えてエラーが発生しない.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

allowSyntheticDefaultImportsのこのフィールドの役割は、静的タイプの検査の時だけであり、importのエラーがないと無視される.exports.defaultは、本当にコンパイル中に互換コードを生成し、モジュールを正しく導入できるようにする.それとも開始コードですか?

import React from "react";

現在TSコンパイル後はこうなります.

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};

Object.defineProperty(exports, "__esModule", { value: true });

var react_1 = __importDefault(require("react"));

コンパイラは新しいオブジェクトを生成してくれました.モジュールにesModuleInterop属性を与えてくれます.実行時にエラーが発生しません.
三、Tree Shakingdefault仕様でTSをコンパイルすれば、ES6を追加する必要はなく、esModuleInteropだけが必要で、静的なタイプの時報の誤チェックを防ぐ.

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "allowSyntheticDefaultImports": true
  }
}

私たちはどんな状況でallowSyntheticDefaultImports仕様に導き出すかを考えますか?多くの場合、ES6のwebpack特性を使用するために、tree shakingのコードのみに対して有効となる.
ついでにまた散布してください.

import { Button, Select } from 'element-ui'

上のコードをコンパイルした後、次のようになります.

var a = require('element-ui'); 
var Button = a.Button; 
var Select = a.Select;

ES6は、2つのコンポーネントのみを使用しても、コンポーネントライブラリ全体を導入する.babel-plugin-componentの役割は、コードを以下のように変換することである.

//    
import { Button, Select } from 'element-ui'
//    
import Button from 'element-ui/lib/button' 
import Select from 'element-ui/lib/select'

最終的にコンパイルされたのはこのようにして、使うコンポーネントだけをロードします.

var Button = require('element-ui/lib/button');
var Select = require('element-ui/lib/select');

四、まとめ
本論文はvar a = require('element-ui')を説明した. どのように異なるモジュールの標準パッケージのコードを導入しますか?babel-plugin-componentまたはTypeScriptのコードを導入しても大丈夫です.commonJSとES6を全部配置します.