关于webpack，babel，以及es6和commonJS之间的联系（转）

关于webpack，babel，以及es6和commonJS之间的联系（转）

 

babel是将es6转为es5，而webpack从名字也能看出来，是一个打包工具，根据文件之间的依赖关系，将文件进行打包

原文：https://blog.csdn.net/a250758092/article/details/78543440

在这里理清一下以上几个概念以及他们之间的关系。

如今的浏览器不少都不支持es6的语法，或者仅仅是部分支持，好比你用.360浏览器，你会发现它支持let却不支持箭头函数等。

babel就承担了“翻译”的角色，把es6的写法转换成es5的写法。 
可是有些人可能在一个项目中单独安装完babel，并成功生成了新的文件后，发现导入这个文件到浏览器中却报错了。其中颇有可能被误导的是 import这个关键词。

实际上babel转换后的代码是遵循commonJS规范的，而这个规范，浏览器并不能识别。所以导入到浏览器中会报错，而nodeJS是commonJS的实现者，因此在babel转换后的代码是能够在node中运行的。

为了将babel生成的commonJS规范的es5写法可以在浏览器上直接运行，咱们就借住了webpack这个打包工具来完成，由于webpack自己也是遵循commonJS这个规范的，从它的配置文件webpack.config.js中就能够看出来

//module.exports是commonJS的接口输出规范，es6的规范是export
module.exports = {
    entry: path.join(__dirname, 'index.js'),
    output: {
        path: path.join(__dirname, 'outs'),
        filename: 'index.js'
    },
};

es6和commonJS的关系。

在es6标准出来以前，你们都是commonJS或者AMD规范来模块化。而es6并无沿用commonJS的东西，因此他们之间并无什么必要的联系。在这里只谈es6和commonJS的 导入和输出的区别，其余深刻的请自行了解

在commonJS中引入文件和输出接口分别为

require('./a');//引入
//对外接口
module.exports={
a:xxx,
b:function(){}
}

而es6的写法则是

//引入
import {a,b,c} from './a';

//输出
export {a,b,c}

因此总会有人把es6的export和commonJS的module.exports拿来作比较，他们是彻底不一样的东西。至于在网上看到的代码，有一些用export有一些用module.exports区别只是在于他们有没有用es6的规范来写，完整的流程是 es6->es5(commonJS规范)->浏览器可执行代码。 重点只在于他们是直接用es5写仍是用es6写，用es6的话就多了一个转换的步骤

那么咱们应该如何利用webpack完成一整个步骤呢？即用es6写法直接生成浏览器可识别的代码，而不用单独用babel指令生成代码再转换。webpack为咱们提供了一系列的方案。

• 首先咱们建立一个空白项目
• 进入项目，并安装如下各个依赖

npm install --save webpack
npm install --save babel-loader
npm install --save babel-core
npm install --save babel-preset-es2015

自从babel升级6.x版本后就分红了两个插件，一个是babel-core【终端运行】，(若是是node请安装babel-cli )，一个是babel-preset-es2015

安装完上述内容以后，须要设置一个.babelrc的文件放在根目录下，内容为

{
  "presets": ["es2015"]
}

而且在webpack.config.js中配置babel-loader

module.exports = {
    entry: "./js/main.js",
    output:{
        filename: 'bundle.js'

    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: "babel-loader"

        }]

    }
}

配置完成后，就能够直接在JS文件中使用es6的语法，而后经过webpack命令打包生成，便可