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 --save

npm 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

然后运行webpack，即可。