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 局部的,不会污染全局。为开发框架准备的。

老样子。依然去新建一些文件:

webpack中编译es6和es7_第1张图片

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文件

webpack中编译es6和es7_第2张图片

里面的代码就会编译成如下格式:

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,即可。





你可能感兴趣的:(web前端)