webpack的js编译

webpack来来回回学了几次了。

这一次获得了新的东西。

 

编译es6.

需要的loader：c

npm i babel-loader @babel/core -D

但是在js文件中写es6语法（比如箭头函数），编译出来的结果依然维持着箭头函数本身。没有对es6语法进行编译。

这是因为，没有告知webpack，需要将js编译成es6，es5还是其它。

所以需要安装：

cnpm i @babel/preset-env -D

 

webpack.config.js的配置：

针对浏览器为目标：

{
    	 	test:/\.js$/,
    	 	use:{
                 loader:'babel-loader',
                 options:{
                     presets:[
                         ['@babel/preset-env',{
                             targets:{
                                browsers:['>1%']//市场占有率>1%
                             }
                         }]
                     ]
                 }
    	 	}
    	 },

 针对node版本的配置

{

  "presets": [

    ["@babel/preset-env", {

      "targets": {

        "node": "8.9.3"
      }      
    }]
  ]
}

针对特定浏览器配置：

{

  "presets": [

    ["env", {

      "targets": {

        "browsers": "ie 11"

      }      

    }]

  ]

}

在上面的babel配置中，babel只是将一些es6，es7-8的语法转换成符合目标的js代码，但是如果我们使用一些特性或方法，比如Generator, Set, 或者一些方法。babel并不能转换为低版本浏览器识别的代码。

babel-polifill插件

简单的说，polifill就是一个垫片，提供了一些低版本es标准对高级特性的实现。babel-polifill生成一个全局对象，一般用于项目开发，它的全局垫片，是将所有es6需要编译的对象用es5实现了。所以，打包出来的体积很大。

使用polifill的方法如下：npm install --save babel-polifill

在入口文件中引入：

import 'babel-polyfill' 

 或者在webpack.config.js的入口文件中：

entry：{

app:['babel-polyfill'，'./app.js']

}

@babel/plugin-transform-runtime生成一个局部对象，按需重写，不会特别增大体积。一般用于框架开发。

也可以在.babelrc中配置：

将options中配置的放入该文件中：

presets:[
                         ['@babel/preset-env',{
                             targets:{
                                browsers:['>1%']//市场占有率>1%
                             }
                         }]
                     ]

语法糖的编译：

cnpm i typescript ts-loader -D

{

    　　　"presets": ["@babel/preset-env"],

   　　　"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

　　  }

 

来源：CSDN

作者：newway007

链接：https://blog.csdn.net/newway007/article/details/103453077