webpack的js编译

webpack来来回回学了几次了。

这一次获得了新的东西。

 

编译es6.

需要的loader：

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": [

    ["@babel/preset-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

在入口文件app.js中引入：

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

module.exports = {

    entry: {

        app: './app.js'

    },

 

    output: {

        filename: '[name].[hash:2].js'

    },

    module:{

        rules:[

         {

            test:/\.js$/,

            use:{

                 loader:'babel-loader',

                 options:{

                     presets:[

                         ['@babel/preset-env',{

                             targets:{

                                browsers:['>1%']

                             }

                         }]

                     ],

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

                 }

            }

         },

         {

            test:/\.tsx?$/,

            use:'ts-loader'

         }

        ]

    }

}