포트폴리오를 만들기 시작하고 무료로 공개 (Webpck4, Babel에서 ES6 → ES5로 변환)

포트폴리오를 만들기 시작하고 무료로 공개 (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에서 열람할 수 있었습니다.

Reference

이 문제에 관하여(포트폴리오를 만들기 시작하고 무료로 공개 (Webpck4, Babel에서 ES6 → ES5로 변환)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/uegaki-masaaki/items/3cb394cedb0e4cf892f6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다