從零開始學VUE之Webpack(使用BabelLoader實現ES6語法打包轉ES5語法)

ES6語法轉ES5

在默認的情況下,ES6的語法在打包過后還是ES6的語法,但是這樣會存在一個問題,那就是有的瀏覽器會不支持,所以需要將ES6轉為ES5

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

執行一下

D:\[e-mail]\vue\day1\html\4.從0開始學VUE\simpleloader>npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
npm WARN deprecated babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

> core-js@2.6.12 postinstall D:\[e-mail]\vue\day1\html\4.從0開始學VUE\simpleloader\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN css-loader@3.6.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@2.0.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN simpleconfig@1.0.0 No description
npm WARN simpleconfig@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ babel-loader@7.1.5
+ babel-preset-es2015@6.24.1
+ babel-core@6.26.3
added 85 packages from 15 contributors and audited 491 packages in 53.006s

13 packages are looking for funding
  run `npm fund` for details

found 10 vulnerabilities (2 low, 8 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

D:\[e-mail]\vue\day1\html\4.從0開始學VUE\simpleloader>

安裝成功

添加webpack.config.js的配置

// 需要從node依賴中引入 需要添加依賴環境
const path = require('path');

module.exports = {
    // 配置源碼打包位置
    entry: './src/main.js',
    // 配置目標位置
    output: {
        // path 只能寫絕對路徑 不能寫相對路徑 但是不要直接寫死,需要動態獲取文件位置
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
          // 增加轉換配置
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    }
}

執行打包

打包成功

查看bundle.js

我們之前的main.js中是存在const關鍵字的

在打包后已經搜索不到了

已經被轉換成了ES5的語法

運行效果

運行沒有問題,還是可以照常執行的

作者：彼岸舞

時間：2021\06\07

內容關於：VUE

本文屬於作者原創,未經允許,禁止轉發