Babel - preset

7491 ワード
babel テキストリンク
Preset
  • ECMAScript 2015+にエンコードする際に必要なプラグインを1つ1つ設定するのは困難なタスク
    • です.
  • の目的により、様々なプラグインを組み合わせて「プリセット」と呼ぶ.
    • カスタムプリセット
    module.exports = function myBabelPreset() {
  return {
    plugins: [
      "@babel/plugin-transform-block-scoping",
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-strict-mode"
    ]
  }
}
    babel.config.js
  • のプリセット配列にカスタムプリセットパス
    • を記入する.
    module.exports = {
  presets: [
  	'./my-babel-preset.js'
  ]
}
    バーベルのプリセット
    実際の操作では、単一のプラグイン、カスタムプリセットではなく、提供されたプリセットが使用されます.
    バーベルは目的に応じていくつかのプリセットを提供します
  • preset-env
  • preset-flow
  • preset-react
  • preset-typescript
    • preset-env
  • ECMAScript 2015+を変換します.
  • バーベル7以前のバージョンでは毎年1つのプリセットが提供されていましたが、現在はenv
    • に統合されています.
    設定
    $ npm i -D @babel/preset-env
    ターゲットブラウザ
  • targetオプションにブラウザのバージョン名を指定すると、envプリセットは対応するプラグインを見つけ、最適なコードを出力します.
    • babel.config.js
    module.exports = {
  presets: [
  	['@babel/preset-env', {
      targets: {
        chrome: '79',
        ie: '11'
      }
    }],
  ]
}
    ポリエステル
    多段文字とは,Web開発において機能をサポートしないWebブラウザ上の機能を実現するコードである.
  • バーベルは、ECMAScript 2015+をECMAScript 5バージョンに変換できるように構築されているだけです.
  • でなければ、polypeと呼ばれるコードセグメントを追加することによって解決することができる.
  • ex:)PromiseはECMAScript 5バージョンで代用できません.バージョン別に実装できるのは
    • のみです
    設定
    $ npm i -D core-js
    babel.config.js
    module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', // 폴리필 사용방식 지정
        corejs: { // 폴리필 버전 지정
          version: 2
        }
      }
    ]
  ]
}
    Webパッケージへの統合
  • 実務では、バーベルを直接使用するよりも、Webパッケージとして統合するのが一般的である.
  • の形でBabel-Loader
    • を提供する
  • babel-loaderとして、Webパッケージとともに使用すると、より簡単で自動化されたフロントエンド開発環境を提供できます.
    • 設定
    $ npm i -D babel-loader
    webpack.config.js
    const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './app.js'
  },
  output: {
    path: path.resolve('./dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/, // js 파일에
        loader: 'babel-loader', // babel-loader를 동작
        exclude: /node_modules/ // node_modules 라이브러리들을 바벨로더가 처리하지 않도록 제외시킴
      }
    ]
  }
}
    returnを使用して関数を終了する
    makeインストールredisエラー解決方法