最简单的babel+webpack配置
Posted amiezhang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了最简单的babel+webpack配置相关的知识,希望对你有一定的参考价值。
首先先介绍一下2个重要的库:core-js 和 regenerator
core-js
core-js 是用于 javascript 的组合式标准化库,它包含 es5 (e.g: object.freeze), es6的 promise,symbols, collections, iterators, typed arrays, es7+提案等等的 polyfills 实现。也就是说,它几乎包含了所有 JavaScript 最新标准的垫片。不过为什么它不把 generator 也实现了... ??
regenerator
它是来自于 facebook 的一个库。主要就是实现了 generator/yeild, async/await。
下面我们看看配置
package.json
"name": "babel-test", "main": "main.js", "scripts": "start": "webpack" , "devDependencies": "@babel/cli": "^7.5.5", "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "babel-loader": "^8.0.6", "webpack": "^4.38.0", "webpack-cli": "^3.3.6" , "dependencies": "core-js": "^3.1.4", "regenerator-runtime": "^0.13.3"
@babel/cli @babel/core 是最基础的2个依赖,结合使用可以把js代码解析成AST,传给plugins,然后再反解析会来编译结果
@babel/preset-env 是babel plugins的预设,它能根据配置,很智能的配置需要的plugins
webpack webpack-cli babel-loader 就是配合babel使用的模块管理器的相关依赖了
core-js regenerator-runtime 上面其实已经介绍过了,是作为polyfill,供@babel/preset-env使用(适当的配置,可以把这2个库的代码,按需打入bundle)
babel.config.js
module.exports = presets: [ [ "@babel/preset-env", "corejs": "3", // 指定core-js的版本,2或者3,这里我们用最新版3 "useBuiltIns": "usage", // usage是最佳实践,会按需把core-js和regenerator引入(所谓按需就是按下面的target和编译的js用到的es6语法来判断) "targets": // 目标浏览器 "chrome": "58", "ie": "9", , ] ], exclude: [/node_modules/] // 不要编译node_modules,不然会出一些奇奇怪怪的问题 ;
webpack配置:
const path = require(‘path‘); module.exports = mode: "development", entry: app: ‘./main.js‘ , output: filename: ‘bundle.js‘, path: path.resolve(__dirname, ‘./dist‘), , module: rules: [ test: /\.js$/, use: [‘babel-loader‘], // exclude: /node_modules/ // exclude写在babel.config.js,这里就可以不写了 ] ;
主要就是配置用babel-loader
以上是关于最简单的babel+webpack配置的主要内容,如果未能解决你的问题,请参考以下文章