webpack中编译es6和es7
今天来学习webpack如何编译es6和es7.做一下笔记，初学，如果有不对的地方，希望大神指正。
babel-loader 这个的速度不是很快，因为要对文件进行分析后再转换
babel-preset es规范的总结。es2015，es2016，es2017，我们在工作中用的最多的env。因为它包括了es15-17.
babel-plugin 插件这里介绍俩个，都是针对函数和方法的转换。分别如下：
babel-polyfill：垫片。为了保持各浏览器的api一致，为应用准备的，它是全局的
babel-Runtime-Transform 局部的，不会污染全局。为开发框架准备的。
老样子。依然去新建一些文件：
npm i babel-loader babel-preset-env -D 安装babel-loader在入口文件，写下一些es6的语法。比如：
let
func
=
()
=>
{};
const
NUM
=
45
;
let
arr
=
[
1
,
2
,
4
];
let
arrB
=
arr
.
map
(
item
=>
item
*
2
);
arr
.
includes
(
8
);
console
.
log
(
newset
(
arrB
));
这个时候，就要开始配置webpack.config.js中写入如下代码
module
.
exports
=
{
entry:
{
app:
'./app'
},
output:
{
filename:
'[name].[hash:5].js'
},
module:
{
rules:
[
{
test:
/
\.
js
$
/
,
use:
{
// 使用babel-loader
loader:
'babel-loader'
,
//选项,target指针对于什么样的浏览器来解析.
options:
{
"presets"
:
[
[
"env"
, {
"targets"
:
{
"browsers"
:
[
"last 2 versions"
,
"safari >= 7"
]
}
}]
]
}
},
exclude:
'/node_modules/'
}
]
}
}
这时候运行webpack，就会有结果了，来看一下，自动生成一个新的js文件
里面的代码就会编译成如下格式：
var
func
=
function
func
() {};
var
NUM
=
45
;
var
arr
=
[
1
,
2
,
4
];
var
arrB
=
arr
.
map
(
function
(
item
) {
return
item
*
2
;
});
arr
.
includes
(
8
);
console
.
log
(
newset
(
arrB
));
但是我们会发现，这些代码中的includes和newset并不能解析。下面说说两个插件。
第一步：安装依赖
npm i babel-polyfill babel-runtime babel-loader --savenpm i babel-plugin-transform-runtime -D第二布：如果使用babel-polyfill，很简单。在你的入口文件app.js中，import babel-polyfill即可
import
'babel-polyfill'
;
这时候的新的js文件中就会有如下代码
$export
(
$export
.
P
+
$export
.
F
*
__webpack_require__
(
129
)(
INCLUDES
),
'String'
, {
includes
:
function
includes
(
searchString
/* , position = 0 */
) {
return
!!~
context
(
this
,
searchString
,
INCLUDES
).
indexOf
(
searchString
,
arguments
.
length
>
1
?
arguments
[
1
]
:
undefined
);
}
});
说明成功了。
如果你要使用局部的呢？
新建一个.babelrc文件。内容如下：
{
"presets"
: [
[
"env"
, {
"targets"
: {
"browsers"
: [
"last 2 versions"
,
"safari >= 7"
]
}
}]
],
"plugins"
: [
"transform-runtime"
]
}
webpack.config.js中的use里面的options去除。
app.js中引入的babel-polyfill去除。
这里需要安装babel-core
npm i babel-core --save-dev