219、babel-loader，es6 轉 es5
阿新 • • 發佈：2022-03-17
1、安裝babel-loader
npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/runtime
@babel/core : babel核心檔案 @babel/preset-env ：es6轉es5,但是無法轉高階API如Array.from,需要再安裝babel-polyfill @babel/plugin-proposal-class-properties ：支援es6,class Goods類語法 @babel/plugin-transform-runtime ：es6轉es5時babel 會需要一些輔助函式，例如_extend。這樣檔案多的時候，專案就會很大。所以 babel 提供了 transform-runtime 來將這些輔助函式“搬”到一個單獨的模組
babel-runtime中，這樣做能減少專案檔案的大小。 @babel/runtime ：編譯模組的工具函式
2、配置
module:{ rules:[ { test:/\.(js|jsx)$/, //支援require('*.js')檔案 use:{ loader:"babel-loader", options:{//用babel-loader 需要es6-es5 presets:[ '@babel/preset-env' ], plugins:['@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime' ], } }, include:path.resolve(__dirname,'src'),//需要轉換的資料夾 exclude:/node_modules/ //排除轉換的資料夾 } ] },
【程式碼演示】