webpack对es6的支持问题

Question

webpack配置函数中没有配置babel-loader来进行es6代码的转换，也没有配置.babelrc，那么在index.js中直接使用import不会报错这是为什么？？

webpack.config.js

var path = require('path');
module.exports = {

    //入口
    entry: {
        main: './src/index.js',
    },
    output: {
        //所有产出资源路径
        path: path.join(__dirname, 'dist'),
        filename: 'main.js',
    },
}

index.js

import './a.js';
console.log("我是index");

Answer 1

我想你没有明白babel是干什么的

What is Babel?

Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

• Transform syntax
• Polyfill features that are missing in your target environment (through * @babel/polyfill)
• Source code transformations (codemods)
• And more! (check out these videos for inspiration)

速查各大浏览器最新版本对ES6的支持

Answer 2

我的理解是，webpack本身是支持ES6语法的（具体看你的Node版本）

Answer 3

babel只是讲es6转译成es5来兼容不支持es6的浏览器，如果你的浏览器支持es6，那index.js中使用es6是不会报错的

Answer 4

因为node本身已经支持了，ECMAScript Modules 所以无需Babel也可以正常运行

Answer 5

因为webpack用了acorn：

而且webpack官方文档也说了支持import, export了呀，各位看文档不仔细呀。。

Answer 6

webpack从配置文件配置的的入口文件开始，也就是webpack要处理打包的那些文件，并不是要立即执行一遍的。

webpack做的是，执行webpack的node程序，读取wepack配置文件，用node程序处理要打包的程序文件。这里的处理文件，你应该理解成处理文件的文本内容。

也就是一句话，用一个js程序处理其他js文件的文本内容。

把你项目里面的代码，当成文本来读却不需要去执行。webpack程序读到你项目里面的入口a.js文件那些各种各样的模块语法后，就会用类似文本替换的方式，换成需要执行你项目代码的环境认识的模块语法。

总之就是，webpack做的是打包处理js代码文本，而不是执行代码。