ポートフォリオを作り始めて無料で公開する（Webpck4、BabelでES6→ES5に変換）

3254 ワード
JavaScript es6 webpack4 babel HTML5 JavaScript テキストリンク

ポートフォリオを作り始めて無料で公開する（Babelの塔）の続きです。

作りかけのポートフォリオ

前回、Babelで変換後に、Chromeで閲覧時に謎エラーで動かなくなってしまいましたが、
やっと、ChromeとIE11両方で動きました！やったことの備忘録を書いておきます。

エラーは結局、jQuery周りの変換がちゃんと出来てなかった事が原因のようでした。
その対策もプラグインでしました。

Babelインストール

npm i -D babel-core babel-loader babel-preset-es2015 --save-dev
npm i babel-polyfill --save-dev

インストールしたBabel

package.json
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.3",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",

.babelrcを作成

.babelrc
{
  "presets": [
    "es2015"
  ]
}

Webpackの設定にBabelでJS読み込みするように追加、jQueryの設定を追加

webpack.config.js
+ const webpack = require('webpack');
　・・・・・・・
 module: {
    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      }
    ]
  },
・・・・
  plugins: [
・・・・
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery'
+    })
  ]

アプリのJS内で使ってたjQueryのImport文を修正

-import * as $ from 'jquery';
+import $ from 'jquery';

Webpackでビルド＆サーバ起動

npm run start　　　// "webpack && webpack-dev-server"

これで無事にIEと、Chromeで閲覧できました。