Webpack構成babel-loader

5700 ワード
Webpack babel

babel-loader


原文の表示|倉庫の表示|このページの編集
This package allows transpiling JavaScript files using Babel and webpack.
Notes: Issues with the output should be reported on the babel issue tracker.

インストール


webpack 3.x | babel-loader 8.x | babel 7.x 
npm install [email protected] @babel/core @babel/preset-env webpack

webpack 3.x babel-loader 7.x | babel 6.x 
npm install babel-loader babel-core babel-preset-env webpack

使用法


ドキュメント:loaderの使用loaderのしよう
Webpack構成オブジェクトでは、moduleのloadersリストにbabel-loaderを追加する必要があります.次のようにします.
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

## babelオプションを参照してください.
optionsプロパティを使用してloaderにオプションを渡すことができます.
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-transform-object-rest-spread')]
        }
      }
    }
  ]
}

このloaderは、以下のloader固有(loader-specific)のオプションもサポートします.
  • cacheDirectory:デフォルトはfalseです.設定がある場合、指定したディレクトリはloaderの実行結果をキャッシュするために使用されます.その後のwebpack構築では、実行するたびに発生する高パフォーマンス消費のBabel再コンパイルプロセス(recompilation process)を回避するために、キャッシュの読み取りが試みられます.Null値(loader: 'babel-loader?cacheDirectory')またはtrue(loader: babel-loader?cacheDirectory=true)が設定されている場合、loaderはデフォルトのキャッシュディレクトリnode_modules/.cache/babel-loaderを使用し、いずれのルートディレクトリでもnode_modulesディレクトリが見つからない場合は、オペレーティングシステムのデフォルトの一時ファイルディレクトリに降格してロールバックします.
  • cacheIdentifier:デフォルトはbabel-coreバージョン番号、babel-loaderバージョン番号です.babelrcファイルの内容(存在する場合)、環境変数BABEL_ENVの値(存在しない場合はNODE_ENVに降格)からなる文字列.カスタム値に設定できます.identifierが変更された後、強制キャッシュが無効になります.
  • forceEnv:BABEL_はデフォルトで解析されます.ENVそしてNODE_ENV.BABEL_をloaderレベルで上書きできます.ENV/NODE_ENV.異なるbabel構成のクライアントとサービス側の同構造アプリケーションに非常に役立ちます.

    • 注:sourceMapオプションは無視されます.WebpackがsourceMapを構成している場合(devtoolでオプションを構成)、sourceMapが自動的に生成されます.

    トラブルシューティング


    babel-loaderは遅い!


    できるだけ少ないファイルを翻訳してください./\.js$/を使用してマッチングすると、node_modulesディレクトリまたは他の不要なソースコードを翻訳する可能性があります.node_modulesを除外するには、文書のloaders構成のexcludeオプションを参照してください.cacheDirectoryオプションを使用して、babel-loaderを少なくとも2倍に高速化することもできます.これにより、変換の結果がファイルシステムにキャッシュされます.

    babelは各ファイルに補助コードを挿入し、コードの体積を大きくしすぎます!


    babelは、_extendのようないくつかの共通の方法に対して非常に小さな補助コードを使用している.デフォルトでは、必要なファイルごとに追加されます.
    babel runtimeを独立したモジュールとして導入し、重複した導入を避けることができます.
    次の構成では、babelが各ファイルに自動的にruntime注入を無効にし、babel-plugin-transform-runtimeを導入し、すべての補助コードをここから参照します.
    詳細については、ドキュメントを参照してください.
    注意:npm install babel-plugin-transform-runtime --save-devを実行してプロジェクトに含める必要があります.npm install babel-runtime --saveを使用してbabel-runtimeを依存にインストールする必要があります.
    rules: [
  // 'transform-runtime'      babel     runtime      。
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/transform-runtime']
      }
    }
  }
]

    注:transform-runtimeとカスタムpolyfills(Promise libraryなど)
    babel-plugin-transform-runtimeにはpolyfillが含まれているため、カスタムregenerator runtimeとcoreが含まれています.js、次のwebpack.ProvidePluginを使用してshimmingを構成する一般的な方法は機能しません.
    // ...
        new webpack.ProvidePlugin({
            'Promise': 'bluebird'
        }),
// ...

    次のような書き方も役に立たない.
    require('@babel/runtime/core-js/promise').default = require('bluebird');

var promise = new Promise;

    実際には次のように生成されます(runtimeを使用した後).
    'use strict';

var _Promise = require('@babel/runtime/core-js/promise')['default'];

require('@babel/runtime/core-js/promise')['default'] = require('bluebird');

var promise = new _Promise();

    前のPromiseライブラリは、上書きされる前に参照され、使用されています.
    1つの実行可能な方法は、アプリケーションに「イニシエータ(bootstrap)」ステップを追加し、アプリケーションが開始される前にデフォルトのグローバル変数を上書きすることです.
    // bootstrap.js

require('@babel/runtime/core-js/promise').default = require('bluebird');

// ...

require('./app');

    babelのnode APIはbabel-coreに移行した。


    (原文:The node API for babel has been moved to babel-core.)
    この情報を受信すると、すでにインストールされているbabelパッケージがあり、loaderの略記としてwebpack構成で使用されていることを示します(このような方法では、webpack 2.xバージョンではサポートされません).
      {
    test: /\.js$/,
    loader: 'babel',
  }

    Webpackは、babelではなくbabel-loaderパケットの読み取りを試みます.
    この問題を修正するには、babel v 6で廃止されたため、babel npmパッケージを削除する必要があります.(代わりにbabel-cliまたはbabel-coreが取り付けられている).babelパッケージへの依存によって削除できない場合は、webpack構成で完全なloader名を使用して解決できます.
      {
    test: /\.js$/,
    loader: 'babel-loader',
  }

    License License" class="icon-link" href="#license">

    トラブルがない
    BOJ 7579アプリケーション