webpack 4シリーズ教程(七):babel-loaderを使用する

1.何がBabelですか
現在、ES 6文法は開発において非常に普及しています.ES 7やES 8の文法を使った開発者もたくさんいます.しかし、ブラウザがこれらの高級文法をサポートするのはあまり良くないです.したがって、私たちの新しい文法がブラウザの中でうまく実行できるようになるために、Babelが生まれました.BabelはJavaScriptコンパイラです.新しいJS文法を安心して使えるようにします.矢印関数のようなものです.

() => console.log('hello babel')

Babelでコンパイルした後:

(function(){
    return console.log('hello babel');
});

ブラウザで認識できるES 5文法にコンパイルされます.
2.webpackでbabel-loaderを使う
インストール:

npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack.co nfig.jsを修正し、新しいloaderを追加します.

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
}

JSファイルに会ったらまずbabel-loaderで処理します.excludeはnode_を排除すると表しています.modulesフォルダのファイルです.loaderの配置はOKですが、Babelの役割はまだ発揮できません.プロジェクトのルートディレクトリの下で一つを作成します.

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

私たちはプロジェクトでいくつかのコンポーネントを怠けてロードしたいです.だからBabelプラグインも必要です.

npm i babel-plugin-syntax-dynamic-import -D

babelrcファイルにpluginsの設定を追加します.

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
}

srcディレクトリでhelper.jsを作成します.

console.log('this is helper')

また私達のメールを修正します.

import 'babel-polyfill'
import Modal from './components/modal/modal'
import './assets/style/common.less'
import _ from 'lodash'
const App = function () {
  let div = document.createElement('div')
  div.setAttribute('id', 'app')
  document.body.appendChild(div)
  let dom = document.getElementById('app')
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: '  ',
    content: '  ',
    footer: '  '
  })
  let button = document.createElement('button')
  button.innerText = 'click me'
  button.onclick = () => {
    const help = () => import('./helper')
    help()
  }
  document.body.appendChild(button)
}
const app = new App()
console.log(_.camelCase('Foo Bar'))

buttonがクリックすると、helperをロードして呼び出します.包装した後に見られます.3.bundle.jsを多くして、ブラウザでdist/indexを開けて、networkを開けてみて、3.bundle.jsはロードしていません.ブットオンをクリックした後、ブラウザが3.bundle.jsを要求したことを発見しました.コンソールもデータをプリントしました.
Babelは矢印関数のように文法だけを変換するので、新しいグローバル変数をサポートするためにBabel-polyfillを使用することができます.例えばPromise、新しい原生方法はString.padStartなどです.
インストール:

npm install --save-dev babel-polyfill

入り口のファイルに導入すればいいです.

import 'babel-polyfill'