使用es6新语法编写代码，可是不能运行于低版本浏览器，需要将语法转换成es5的。那就借助巴别塔转换，再加上工具打包，实现代码的转换。

转换包括两部分：语法和应用程序接口

让、const这些是新语法。

新承诺()等这些是新原料药。

简单代码

类库utils.js

常量名称=' weignl '让年份=新日期().getFullYear()导出{姓名，年份}index.js

import _ from 'lodash'import { name，year } from ' ./utils'Promise.resolve(年份)。然后(值={ console。日志(` $ { name }-$ { value }-$ { _).add(1，2)}`)})babel转换

安装巴别塔编译器和对应的运行时环境

复制代码代码如下： NPM安装-D @巴贝尔/核心@巴贝尔/预置-env @巴贝尔/插件-转换-运行时@巴贝尔/poly ill

并新建babelrc .文件，里面可以配置很多东西，内容为：

{ ' preferences ' :[[' @ babel/preference-env '，{ 'useBuiltIns': 'usage '，' modules': false }]，' plugins ' :[[' @ babel/plugin-transform-runtime '，{ 'corejs': false，' helpers ' : false，' regenerator': false，' useESModules ' 3: false }]，' comments ' 3: false } web构建

webpack4，可以零配置构建项目，那是因为它的很多配置值都默认了。在这里，我们需要自己配置。

创建一个webpack.config.js文件

const path=require(' path ')；模块。exports={ mode : ' production '，entry: ['@babel/polyfill '，' ./src/index.js']，输出： { path : path。解析(_ dirname，' dist ')，文件名： '[name]。捆绑。js ' }，模块： {规则3360 [{ test :/ .js$/，包括：[路径。解析(_ dirname，' src') ]，排除：/(node _ modules | bower _ components)/，loader: 'babel-loader '，}] }}使用

工具构建打包好的射流研究…文件，我们将其引入到超文本标记语言文件。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title web pack-babel-es6/title/head dy web pack构建由巴别塔转码的es6语法，支持es6语法和APIbr /请查看浏览器控制台脚本src='http:/dist/main。捆绑。js '/脚本/正文/html运行该html，可以看到控制台有内容输出weichinl-2018-3

最后的目录结构：

可以饭桶查看源码https://github.com/weiqinl/demo/tree/master/webpack-bable-es6

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。