js兼容性處理 · 前端

``` npm i babel-loader @babel/core @babel/preset-env -D ``` polyfill 不推薦，一般用corejs代替 ``` npm i @babel/core @babel/polyfill -D ``` ``` npm i core-js -D ``` webpack.config.js ``` const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ /* js兼容性處理：babel-loader @babel/core 1. 基本js兼容性處理 --> @babel/preset-env 問題：只能轉換基本語法，如promise高級語法不能轉換 2. 全部js兼容性處理 --> @babel/polyfill 問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~ 3. 需要做兼容性處理的就做：按需加載 --> core-js */ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { // 預設：指示babel做怎么樣的兼容性處理 presets: [ [ '@babel/preset-env', { // 按需加載 useBuiltIns: 'usage', // 指定core-js版本 corejs: { version: 3 }, // 指定兼容性做到哪個版本瀏覽器 targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], mode: 'development' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello webpack</h1> </body> </html> ``` src/js/index.js ``` // import '@babel/polyfill'; const add = (x, y) => { return x + y; }; console.log(add(2, 5)); const promise = new Promise(resolve => { setTimeout(() => { console.log('定時器執行完了~'); resolve(); }, 1000); }); console.log(promise); ```