フロントエンド束化:蒸散(第1報)

惰性と刺激反射に飛び込む前に、フロントエンドの資産束の複雑な世界に少し迂回する必要があると思います.
今日のポストでは、JavaScriptの配信のトピックを簡単に調査します.多くの人々は、ソフトウェアの世界では、それはコンピュータが理解できるものであるマシンコードにあなたの高レベルのコードを変換するプロセスを参照してください“コンパイル”という言葉に精通している可能性があります.
しかし、「蒸散」についてはどうですか?彼らは同じように聞こえる.彼らは同じことですか?そうでなければ、「蒸し」という用語は冗長であるとみなされるかもしれません.両者の違いは「抽象化のレベル」にある.私が意味するものを得る例を見ましょう.

コンピレーション→ マシンコード→組立main.c

#include <stdio.h>

int add(int a, int b) {
    return a + b;
}

int main() {
    int x = 2;
    int y = 23;
    int sum = add(x, y);
    printf("%d + %d = %d", x, y, sum);
    return 0;
}

マシンコードにコンパイルします.

gcc main.c  // produce a.out (binary code)
gcc -S -o main.s main.o // product main.s (assembly code)

コード化されたコードからセクションを印刷しましょう.a.out main.s
見てわかるようにa.out 明らかに解読不能であり、理解するmain.s コンピュータシステムアセンブリコードの深い知識が必要です.ポイントは両方ともa.out and main.s 抽象化の下層にあるmain.c 彼らは話すためにその機械に近づいている.

蒸散(ES 6)→ エス5)
ソースコードを下のレバーに変換する編集とは対照的に.一方、蒸散は、抽象化の層をほぼ同じに保ちます.たとえば、Python 2からPython 3やEs 6へのプログラムをES 5に変換すると、ソースコードと出力コードの両方がかなり抽象化されます.
ここでJavaScriptに焦点を合わせているので、Babelを使用した蒸散の例を見てみましょう.

npm init -y

mkdir src
touch src/person.js
touch src/index.js

ES 6を使いましょうclass で使用するperson.js . 私も使用する通知import and export ES 6モジュールからのシンタックス.src/person.js

class Person{
  constructor(name){
    this.name = name
  }

  hello(){
    return `Hello from ${this.name}`
  }
}

export default Person

src/index.js

import Person from './person'

const p = new Person('Ethan')

console.log(p.hello())

アプローチ1:スクリプトで直接Babel/Coreを使用する.

最初に依存関係をインストールします.

npm i -D @babel/core @babel/preset-env

@babel/core : Babel変換APIのすべてをラップするラッパーとして機能するコアモジュールです.あなたの変換パイプラインへのエントリポイントを提供するツールとして考えてください.@babel/core 自分自身のコードの変換方法を知りません.これは、“プラグイン”は便利に来るところです.Babelプラグイン(または“プリセット”)は、実際にコード変換を行うものです.ここで私が使用されます@babel/preset-env , これにより、最新のJavaScript機能を使用できます.
用途@babel/core まずローカルの設定ファイルを設定しなければなりません.

// ./babel.config.json
{
    "presets": [
        "@babel/preset-env"
    ]
}

ここでは、バベルを使用してすべてのファイルを変換する短いスクリプトですsrc ディレクトリと出力変換コードdist ディレクトリ.

// ./babel-example.js
const path = require('path')
const fs = require('fs')
const babel = require('@babel/core')

const srcPath = path.resolve(__dirname, './src')
const distPath = path.resolve(__dirname, './dist')

if (!fs.existsSync(distPath)){
  fs.mkdirSync(distPath)
}

fs.readdir(srcPath, function(err, files) {
  files.forEach(function(fileName) {
    const srcFilePath = path.resolve(srcPath, `./${fileName}`)
    const distFilePath = path.resolve(distPath, `./${fileName}`)

    let code = babel.transformFileSync(srcFilePath , {}).code;
    fs.writeFileSync(distFilePath, code, { flag: 'w+' })
  })
})

簡易走行node babel_example.js スクリプトに実行する.

変種を覗きましょうdist/perform.js ファイル.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Person = /*#__PURE__*/function () {
  function Person(name) {
    _classCallCheck(this, Person);

    this.name = name;
  }

  _createClass(Person, [{
    key: "hello",
    value: function hello() {
      return "Hello from ".concat(this.name);
    }
  }]);

  return Person;
}();

var _default = Person;
exports["default"] = _default;

方法2 :バベルCLIを使う
JSコードを変換するスクリプトを書くのは、このような些細な例ですが、あなたのプロジェクトが成長するにつれて、非常に複雑になります.
幸いにも、バベルは私たちに動作するようにはるかに簡単なインターフェイスを提供するCLIパッケージが付属しています.

npm i -D @babel/cli

package.json

"scripts": {
    "build": "babel src -d dist"
 }

簡易走行npm run build . これは前の方法と全く同じ結果を生成するが、はるかに簡単でエラーが少ない.
それは今日のポストのために、次は1つのCSSのtranpilationです.

参考文献
https://stackoverflow.com/questions/44931479/compiling-vs-transpiling
https://en.wikipedia.org/wiki/Source-to-source_compiler
https://nodejs.org/docs/latest-v13.x/api/esm.html#esm_enabling
https://babeljs.io/docs/en/babel-core