yukihirop / my-module-bundler Goto Github PK

https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md

処理の流れ

this.addHelper("_slicedToArray")
↓
helper.ensure("_slicedToArray", File)
↓
helper.loadHelper("_slicedToArray")
↓
helper.getHelperMetadata({ast: helpers["_slicedToArray"].ast() })
↓
ASTになったヘルパー関数に対してトラバース。dependenciesとかを洗い出す

before

import _arrayWithHoles from '_arrayWithHoles';
  import _iterableToArrayLimit from '_iterableToArrayLimit';
  import _unsupportedIterableToArray from '_unsupportedIterableToArray';
  import _nonIterableRest from '_nonIterableRest';

  export default function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
  }

after

 function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
  }

dependencies

function _arrayWithHoles(arr) {
    if (Array.isArray(arr)) return arr;
}

function _nonIterableRest() { 
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

Summary

_typeof = scope.generateUidIdentifier("_typeof");

を使う

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/ja/plugin-handbook.md#generating-a-uid

https://github.com/Microsoft/TypeScript/issues/6579

状況

lernaのパッケージが二つあるとして

packages
├── bundler(パッケージの名前は、@yukihirop/bundler)
└── plugin-transform-arrow-functions (パッケージの名前は、@yukihirop/plugin-transform-arrow-functions)

が二つあるとして、 bundlerのdependenciesにplugin-transform-arrow-functionsを入れたい場合

やり方

1. typescirptのコンパイル (lid/index.js・lib/index.d.tsの作成)
2. lerna add

typescirptのコンパイル

plugin-transform-arrow-functions をコンパイルする必要がある。

lerna.jsonがあるディレクトリから以下のようにコンパイルできる

tsc -b plugin-transform-arrow-functions

これで packages/plugin-transform-arrow-functions/lib/index.js(index.d.ts) などが作成されたかを確認する。

コンパイル結果は commonjs になってないと、ts-node で動かなくなるので注意が必要

tsconfig.json の compilerOptions.module が commonjs になっているか確認が必要

lerna add

1. typescriptのコンパイルが終わったら、lerna addできる。

packages/bundlerのパッケージもtypescriptで作成されているので、devDependencies でいい。

lerna add @yukihirop/plugin-transform-arrow-functions --scope @yukihirop/bundler --dev

lerna remove

lerna removeはないので間違ってdependenciesを入れてしまった場合、以下のようなコマンドで取り消す

lerna exec --scope @yukihirop/bundler -- yarn remove @yukihirop/plugin-transform-arrow-functions || lerna bootstrap

Summary

• bundlerからplugin-transform-**を除去する
• plugin-transform-**でbundlerを参照するようにする
• 各プラグインでのテストは各プラグインで行うようにする

Summray

記憶が新しいうちに作る。

#17 の実装中に思いついて実装したやつを切り出して、npmにする。

https://github.com/yukihirop/my-module-bundler/tree/implement_plugin-transform-destructing/packages/plugin-transform-destructuring/src/helperImpl

babel公式ではhelpersの定義をカスタムでできないが、できるようにするライブラリーである。

https://babeljs.io/docs/en/babel-helpers#defining-helpers

注：このパッケージは、このリポジトリに含まれているパッケージでのみ使用されることを意図しています。現在、サードパーティのプラグインがヘルパーを定義する方法はありません。

udf = user define functions

の略

Summary

https://babeljs.io/docs/en/babel-plugin-transform-destructuring

進捗状況

xは対応してないもの

• interop
• misc
• update-expression(x)
• source-map(x)
• regression(x)
• noInterop
• strict(x)
• lazy-whitelist(x)
• lazy-local(x)
• lazy-dep(x)
• loose
• strictMode
• class-properties(x)
• auxiliary-comment(x)

https://github.com/babel/babel/tree/main/packages/babel-plugin-transform-modules-commonjs/test/fixtures

Summary

@babel/plugin-transform-arrows-functions 相当のプラグインの作成

Summary

• globalThis => traverserThis
• GlobalThisType => TraverserThisType

に改名する

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects

Summary

• varは巻き上げられる
• constとletは巻き上げられない
• 関数宣言は巻き上げられる
• 関数式は巻き上げられない

exportの巻き上げ(Babel REPLの例)

import { isEven } from "./evens";

export function nextOdd(n) {
  return isEven(n) ? n + 1 : n + 2;
}

export var isOdd = function isOdd(isEven) {
  return function (n) {
    return !isEven(n);
  };
};

とトランスパイルすると、nextOdd は巻き上げられるが、 isOdd は巻き上げられない

"use strict";

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

// nextOddは巻き上げられている。つまり、この時点でexports.nextOdd(n)が実行できる。
exports.nextOdd = nextOdd;
// isOddは巻き上げられてない。つまり、この時点でexports.isOdd(n)が実行できない。
exports.isOdd = void 0;

var _evens = require("./evens");

function nextOdd(n) {
  return (0, _evens.isEven)(n) ? n + 1 : n + 2;
}

var isOdd = function isOdd(isEven) {
  return function (n) {
    return !isEven(n);
  };
};

// ここで設定されているのは巻き上げようとしても巻き上げれなかった結果なのである。
exports.isOdd = isOdd;

importの巻き上げ(Babel REPLの例)

巻き上げのママではなく、順番が正されているね。

_interopRequireDefault は関数宣言で巻き上げられるので実行できるんだね。

var _interopRequireDefault = function(){..} って書いてしまったら巻き上げられずにエラーになるわけか。

参考

もろわかりやすかった。

https://scotch.io/tutorials/understanding-hoisting-in-javascript

Summary

parserをbaylon(archived)から@babel/parserに変更して正しくエラーがキャッチされるようになった事に夜影響だと思う

  ● arrow-functions › basic

    SyntaxError: Identifier 'a' has already been declared (18:9)

      30 |   private createAsset(filename: string): AssetType {
      31 |     const content = fs.readFileSync(filename, 'utf-8');
    > 32 |     const ast: any = parser.parse(content, {
         |                             ^
      33 |       sourceType: 'module',
      34 |     });

やり方

lerna.json があるディレクトリのpackage.jsonのscriptsタグにこんな感じでかく

{
  "private": true,
  "scripts": {
    "test": "yarn build && jest",
    "test:debug": "yarn build && node --inspect -r ts-node/register ./node_modules/.bin/jest --runInBand"
  },
  "devDependencies": {
    "jest": "^26.0.1"
  },
  "workspaces": [
    "packages/*"
  ]
}

すると、node debuggerをchromeで開いた状態で

yan test:debug

とすると、debugger の位置でとまるようになる。

参考

https://github.com/TypeStrong/ts-node/issues/537#issuecomment-368305072

Summary

@babel/plugin-transform-typeof-symbolへ以下のケースのテストを追加する。

_typeof2に変換されるのは結構重要な性質だと思う

typeof-function-declaration

typeof-function-expression-func

typeof-function-expression-var

• https://github.com/babel/babel/issues/11596
• https://github.com/babel/babel/issues/11569
• https://github.com/babel/babel/issues/11605
• https://github.com/babel/babel/issues/11610
• https://github.com/babel/babel/issues/10932
• https://github.com/babel/babel/issues/10841
• https://github.com/babel/babel/issues/10629

概要

勉強のために、@babel/preset-env が行なっているトラバース処理を自分で実装する。
つまり、複数のplugin-transformの作成とpreset自体の作成を行う。

やる事

• transformプラグインでESMをCommonJSに変換して、module bundleで ブラウザで動くようにする 。

やらないこと

• babel-coreの実装。babel-coreをそのまま使う。故にhelperを使う時に使用すうaddHelperとかもbabel-coreが定義しているやつを使う。
• UMD・AMD・SystemJSに変換はしない。

@babel/preset-envで使われているプラグイン一覧

https://github.com/babel/babel/blob/master/packages/babel-preset-env/src/available-plugins.js

ファイルに書いてあるプラグインで対応するものにcheckを入れる

• @babel/plugin-syntax-async-generators(async generatorsの対応)
• @babel/plugin-syntax-class-properties
• @babel/plugin-syntax-dynamic-import
• @babel/plugin-syntax-json-strings
• @babel/plugin-syntax-nullish-coalescing-operator
• @babel/plugin-syntax-numeric-separator
• @babel/plugin-syntax-object-rest-spread
• @babel/plugin-syntax-optional-catch-binding
• @babel/plugin-syntax-optional-chaining
• @babel/plugin-syntax-top-level-await
• @babel/plugin-proposal-async-generator-functions(余力があったらサポートしてみる)
• @babel/plugin-proposal-class-properties
• @babel/plugin-proposal-dynamic-import
• @babel/plugin-proposal-json-strings(メリットがよくわからん)
• @babel/plugin-proposal-nullish-coalescing-operator(ヌリッシュ合体演算子)
• @babel/plugin-proposal-numeric-separator(ヌメリックセパレーター)
• @babel/plugin-proposal-object-rest-spread(オブジェクト・スプレッド・レスト)
• @babel/plugin-proposal-optional-catch-binding(try...cactch文にfinalyをつけるやつ？)
• @babel/plugin-proposal-optional-chaining(オプショナルチェイン(babel提案)・nodeで受け入れられたのでやる)
• @babel/plugin-proposal-private-methods(#をつけて変数を書いたらプライベートになる)
• @babel/plugin-proposal-unicode-property-regex
• @babel/plugin-transform-async-to-generator(async・awaitの変換)
• @babel/plugin-transform-arrow-functions(arrow functionの変換)
• @babel/plugin-transform-block-scoped-functions(functionを取り除くやつ・メリットがわからん)
• @babel/plugin-transform-block-scoping(ブロックスコーピング)
• @babel/plugin-transform-classes(ネイティブクラスはSuperClass.applyの呼び出しできないからextendsしたクラスを使うようにするプラグイン)
• @babel/plugin-transform-computed-properties(計算されたプロパティー)
• @babel/plugin-transform-destructuring(展開代入)
• @babel/plugin-transform-dotall-regex(dotAll正規表現)
• @babel/plugin-transform-duplicate-keys(オブジェクトのキーの重複を回避するプラグイン)
• @babel/plugin-transform-exponentiation-operator(2乗)
• @babel/plugin-transform-for-of(for-ofの理解になるからやってみるか)
• @babel/plugin-transform-function-name(arrow functionを解決して、変数名を関数名にするプラグイン)
• @babel/plugin-transform-literals(unicodeを文字列に変換するプラグイン)
• @babel/plugin-transform-member-expression-literals(予約語をプロパティーのキーにしている時に文字列に変換するプラグイン)
• @babel/plugin-transform-modules-amd(ESMをAMDに変換するプラグイン)
• @babel/plugin-transform-modules-commonjs(ESMをCJSに変換するプラグイン)
• @babel/plugin-transform-modules-systemjs(ESMをSystemJSに変換するプラグイン)
• @babel/plugin-transform-modules-umd(ES6をUMDに変換するプラグイン)
• @babel/plugin-transform-named-capturing-groups-regex(正規表現のネームキャプチャリング)
• @babel/plugin-transform-new-target(よくわからない)
• @babel/plugin-transform-object-super(メソッドをキー: functionに書き直すプラグイン)
• babel-plugin-transform-es2015-parameters(ES2015(ES6)のパラメーターをES5に変換)
• @babel/plugin-transform-property-literals(プロパティーキーの""をとるプラグイン(default除く))
• @babel/plugin-transform-regenerator(generatorの変換)
• @babel/plugin-transform-reserved-words(ES3の予約語の名前が使われていたら回避するようにするプラグイン,abstractとか)
• @babel/plugin-transform-shorthand-properties(ショートハンドプロパティー, {a,b} => {a: a, b: b}と書き直すやつ)
• @babel/plugin-transform-spread(スプレッドの変換)
• @babel/plugin-transform-sticky-regex(スティッキー正規表現)
• @babel/plugin-transform-template-literals(テンプレートリテラル)
• @babel/plugin-transform-typeof-symbol(typeofのES6で導入されたSymbol対応)
• @babel/plugin-transform-unicode-escapes(unicodeのエスケープ)
• @babel/plugin-transform-unicode-regex(unicodeのエスケープ(正規表現))

ここから、babel/preset-modulesの非公開？？プラグイン(公式ドキュメントなし)

• @babel/preset-modules/lib/plugins/transform-async-arrows-in-class(Safari10.3でのarrow関数で起きた問題の回避用プラグイン)
• @babel/preset-modules/lib/plugins/transform-edge-default-parameters(デフォルト値をもつ非構造化パラメーターを短縮形以外の構文に変換。Edge16 or Edge17でのバグを回避)
• @babel/preset-modules/lib/plugins/transform-tagged-template-caching(デフォルト値をもつ非構造化パラメーターを短縮形以外の構文に変換。ESMをサポートするブラウザーSafari10 or Safari11のタグ付きテンプレート関係のバグが修正される)
• @babel/preset-modules/lib/plugins/transform-safari-block-shadowing(Safari 10/11のブロックシャドウのlet/constのバインディング修正)
• @babel/preset-modules/lib/plugins/transform-safari-for-shadowing(Safari〜11には、Forステートメントの変数宣言がパラメーターをシャドウする場合にスローされるという問題があります。これは、For *ステートメントのleft / init部分の宣言の名前を変更することで修正され、シャドウされません。)

計画

preset-my (pluginの名前はbabelを限りなく参考にする)

並び順は実装していく順番

• @babel/plugin-transform-arrow-functions(arrow functionの変換)
• @babel/plugin-transform-modules-commonjs(ESMをCommonJSに変換するプラグイン)
  • [メモ]requireをinteropRequire**にwrapするヘルパーを内部で使用する
• @babel/plugin-transform-typeof-symbol(typeofのES6で導入されたSymbol対応)
• @babel/plugin-transform-destructuring(展開代入)
• @babel/plugin-transform-spread(スプレッドの変換)
• @babel/plugin-transform-shorthand-properties(ショートハンドプロパティー, {a,b} => {a: a, b: b}と書き直すやつ)
• @babel/plugin-transform-template-literals(テンプレートリテラル)
• @babel/plugin-proposal-nullish-coalescing-operator(ヌリッシュ合体演算子)
• @babel/plugin-transform-object-super(メソッドをキー: functionに書き直すプラグイン)
• @babel/plugin-proposal-optional-chaining(オプショナルチェイン)
• @babel/plugin-transform-async-to-generator(async・awaitの変換)

=== こっから下はチャレンジ

• @babel/plugin-transform-computed-properties
• @babel/plugin-transform-for-of(for-of)
• @babel/plugin-proposal-class-properties

helpers (helpresは色々ある。今のところ、module-transformだけ認識している)

 - helpers.typeof (typeofのES6で追加されたSymbol対応)
 - helpers.interopRequireWildCard (helpers-module-transfromでwrapする？？)

作成の途中必要性を感じたプラグインは適宜追加していく。

preset-myの使い方

import presetMy from '@yukihirop/preset-my'

  const { code } = transformFromAstSync(ast, null, {
-    presets: [env],
+    presets: [presetMy]
  });

参考

かなりシンプルなpreset、babel-presetを理解する上で参考になるかもしれない。
template.tsで用意しているやつはbebelではbable-helpers扱いなんだね。

https://github.com/babel/babel/blob/master/packages/babel-preset-typescript/src/index.js
https://github.com/babel/babel/blob/master/packages/babel-preset-flow/src/index.js
https://github.com/babel/babel/blob/master/packages/babel-helpers/src/helpers.js#L623-L626

これが一番わかりやすいかもしれない。

https://github.com/babel/preset-modules/blob/master/src/index.js

JavaScriptのモジュール化の歴史がわかっていいかも

https://neos21.hatenablog.com/entry/2018/08/03/080000

気になった事

@babel/babel-preset-env の正体は @babel/preset-modules だがこいつはmonorepoで管理されてない。将来的にはマージされる予定？

便利ツール

Babel Repl

https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=false&code_lz=IYZwngdgxgBAZgV2gFwJYHsLwBQEoYDeAUDPOgE4zADuwqyM2ANgKYMAeM6cMY-xpUgHNs7XAG4SMAL5FpQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Ces2015%2Cenv&prettier=false&targets=&version=7.10.2&externalPlugins=

Summary

=== "object"

=== "symbol"