webpack4 使用babel处理ES6语法的一些简单配置
Posted init-007
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack4 使用babel处理ES6语法的一些简单配置相关的知识,希望对你有一定的参考价值。
一,安装包
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
npm install --save @babel/polyfill
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install @babel/runtime-corejs2 -D
二 然后配置webpack.config.js中的module
module: rules: [ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" ]
三 然后在根目录的 .babelrc文件中配置
"plugins": [ [ "@babel/plugin-transform-runtime", "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false ] ]
不在 .babelrc文件中配置也可以:
https://babeljs.io/setup#installation 有关于webpack的一些安装配置
test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options: // "presets": [["@babel/preset-env", // "targets": // "chrome": "67" // , // useBuiltIns: "usage", // ]] "plugins": [ [ "@babel/plugin-transform-runtime", "absoluteRuntime": false, "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false ] ]
可以使的ES6语法变为ES5,向下兼容,还可以根据引用使用的不存在函数自动引入
以上是关于webpack4 使用babel处理ES6语法的一些简单配置的主要内容,如果未能解决你的问题,请参考以下文章