2.1.5 javascript 的编译

1、编译 es6

语法编译：babel-loader

npm installl babel-loader @babel/core -save-dev

babel-loader    //编译es6需要用到的loader，只能编译es6的一些语法，，，对于es6方法，无能为力
@babel/core    //babel-loader的编译核心

module: {
        rules: [
            {
                test: /\.js/,
                use:'babel-loader'
            }
        ]
}

打包之后的文件，es6写法未被编译

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}
([function(e,t){setTimeout(()=>{console.log(1)})}]);

Bable-preset

Presets是存储javascript不同标准的插件，通过使用正确的presets，告诉babel按照哪个规范编译

常见规范：
    es2015    
    es2016
    es2017
    env (通常采用，储存了很多种规范，包括2015-2017，以及多种浏览器的支持规范)
    babel-preset-stage

需要安装: npm install @babel/preset-env --save-dev
再在babel-loader中进行一定的配置
才能正确的翻译es6

module: {
        rules: [
            {
                test: /\.js$/,
                use:{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env',{
                                targets: { //target 是preset的核心配置，告诉preset编译的具体目标
                                    browsers: ['>1%'] //es5
                                }
                            }]
                        ]
                    }
                }
            }
        ]
    }

 

es6被编译

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}
([function(e,t){setTimeout((function(){console.log(1)}))}]);

target 是preset的核心配置，告诉preset编译的具体目标

target可以：
    · 以 browsers 为目标 （通常情况）
    · 以 node 的版本为目标
    · 以 特定的浏览器 为目标

方法编译：babel-polyfill 或 babel-plugin-transform-runtime

npm install babel-polyfill --save-dev
或 npm install babel-plugin-transform-runtime babel-runtime --dave-dev

babel-polyfill    
原理：生成一个全局对象，（对象中定义了es6的一些api的实现，即把需要用到的所有的es6的方法全部用es5实现，然后放到全局对象中，实际使用的则就是全局对象中定义的方法）
适应：一般用于项目的开发
使用：在文件中引入即可,也可在配置文件中的entry属性中，以数组方式引入

app.js:
import 'babel-polyfill'
new Promise(
    setTimeout(()=>{
        console.log(1);
    })
) 

module.exports = {
    entry: {
        app: ['babel-polyfill','./app.js']
    },
}

babel-plugin-transform-runtime  babel-runtime 
原理：生成局部对象（在app.js作用域内生成一个局部对象），仅会对使用的方法进行重写，不会增大文件体积
适用：框架开发
使用：是一个babel的插件，需要在babel的options里配置

　options内容过多，会导致webpack.config.js文件臃肿，可以把options提出来，编写成文件 '.babelrc'，babel会自动读取这个文件的内容作为配置

.babelrc文件
{  
  "presets": [
      ["@babel/preset-env",{
          "targets": {
              "browsers": [">1%","last 2 version"] //es5
          }
      }]
  ],
  "plugins": [ ["@babel/transform-runtime"] ] }

 语法糖编译：

　　typescript是js的一个超集，让我们可以用强类型的写法写js，与之类似的有jsx，vue等

　　安装loader                         -->  写入配置文件                                     -->  tsconfig.json

　　安装typescript和ts-loader  -->  在wenpack.config.js中写入ts-loader  -->  类似于.babelrc, ts-loader的额外配置

webpack.config.js:
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader'
            }
        ]
    }

tsconfig.json:
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES5"
  },
  "exclude": ["./node_modules/"]
}