webpack js相容性處理
阿新 • • 發佈:2021-12-01
1、基本js相容性處理 --> @babel/preset-env
只能轉換基本語法,promise等高階語法不能轉換
官方文件:https://webpack.docschina.org/loaders/babel-loader/
1)安裝
npm install -D babel-loader @babel/core @babel/preset-env
2)配置
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
2、JavaScript的模組化標準庫 --> core-js
可以按需載入,支援js的高階語法轉換
1)安裝
npm install -D core-js
2)配置
{ test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { // 預設:知識babel做怎樣的相容性處理 "presets": [ ["@babel/preset-env", { // 按需載入 "useBuiltIns": "usage", // 指定core-js版本 "corejs": 3, // 指定瀏覽相容性版本 "targets": { "chrome": "60", "firefox": "60", "ie": "9", "safari": "10", "edge": "17" } }] ] } } }
本次安裝包的版本:
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"babel-loader": "^8.2.3",
"core-js": "^3.19.2",