webpack4のバベルの記事

コードをデモするには、ここをクリックしバベル不慣れで、あなたが見ることができるならば、単純に北を指しバベル7。

JS ES6より多くのファイルの構文をパッケージ化し、使用するのWebPACK使用バベルは非常に便利です、あなたはES5にES6を設定することができます。

開始

空のファイルを用意し、次のコマンドを実行します。

npm init -y
npm i -D webpack webpack-cli
npm i -D babel-loader @babel/core

そして、distのフォルダを作成し、HTMLファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack4 babel 篇</title>
<body>
  <div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

ルートディレクトリ、設定のWebPACK webpack.config.js作成：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js',
  },
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader",
      },
    ],
  },
  devtool: 'source-map',
  // 出口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

コードES6形質転換のためにプラグバベルをインストールします：

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

そして、ルートディレクトリ.babelrcにバベルの設定ファイルを作成します。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "targets": {
          "browsers": ["last 2 versions", "ie >= 10"]
        }
      }
    ]
  ]
}

そして、ルートディレクトリにindex.jsを作成します。

const add = (x, y) => {
  return new Promise((resolve, reject) => {
    resolve( x + y);
  });
}

add(1, 2).then(res => console.log(res));

俵

実行するためにパッケージ化されたターミナル：

npx webpack

distディレクトリの下にオープンbundle.jsは、あなたがの追加ポリフィルの約束を見つけるだろう、コードは、ES5になった検索約束している見ることができます。

// bundle.js

...
var add = function add(x, y) {
  return new Promise(function (resolve, reject) {
    resolve(x + y);
  });
};

add(1, 2).then(function (res) {
  return console.log(res);
});
...

アクセスindex.htmlには、コンソールも正しく印刷します。

グローバルな環境汚染を防ぎます

それは、サードパーティのライブラリやフレームワークを書かれている場合は、@のバベル/プラグイン・変換・ランタイムを使用できるようにポリフィルを使用すると、グローバルな環境汚染を引き起こす可能性がグローバルな汚染を防ぎます。

インストール：

npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime @babel/runtime-corejs2

バベルは、設定を変更します。

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

包装は、することができます。

リマーク

これは主にバベルの構成です。

開始

俵

グローバルな環境汚染を防ぎます

リマーク

おすすめ