Babel 构建与 webpack babel-loader 构建答案

【问题标题】：Babel build vs webpack babel-loader buildBabel 构建与 webpack babel-loader 构建
【发布时间】：2017-06-22 05:06:55
【问题描述】：

index.js

import Colors from "./colors";
module.exports = {
  Colors
};

colors.js

module.exports = {
  // light shades
  white: "#FFFFFF",
  snow: "#F9FAFC",
  darkSnow: "#EFF2F7",
  extraDarkSnow: "#E5E9F2",
  // dark tones
  silver: "#8492A6",
  slate: "#3C4858"
}

运行 babel cli 'babel lib -d build' 后输出是： index.js

"use strict";

var _colors = require("./colors");

var _colors2 = _interopRequireDefault(_colors);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = {
  Colors: _colors2.default
};

colors.js

"use strict";

module.exports = {
  // light shades
  white: "#FFFFFF",
  snow: "#F9FAFC",
  darkSnow: "#EFF2F7",
  extraDarkSnow: "#E5E9F2",
  // dark tones
  silver: "#8492A6",
  slate: "#3C4858",
  steel: "#273444"
}

但是当使用 webpack 加载器时，输出是

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/        if(!__webpack_require__.o(exports, name)) {
/******/            Object.defineProperty(exports, name, {
/******/                configurable: false,
/******/                enumerable: true,
/******/                get: getter
/******/            });
/******/        }
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/        var getter = module && module.__esModule ?
/******/            function getDefault() { return module['default']; } :
/******/            function getModuleExports() { return module; };
/******/        __webpack_require__.d(getter, 'a', getter);
/******/        return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "/";
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


var _colors = __webpack_require__(1);

var _colors2 = _interopRequireDefault(_colors);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

module.exports = {
  Colors: _colors2.default
};

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


module.exports = {
  // light shades
  white: "#FFFFFF",
  snow: "#F9FAFC",
  darkSnow: "#EFF2F7",
  extraDarkSnow: "#E5E9F2",
  // dark tones
  silver: "#8492A6",
  slate: "#3C4858",
  steel: "#273444",
  black: "#1F2D3D"
}

所以我的问题是，为什么 webpack 会在我的包中添加额外的代码。 webpack bundle 代码是不是和我的 babel 输出代码类似？

【问题讨论】：

所有 Webpack 所做的只是首先使用 Babel 将你的 ES6 转换为 ES5。有了那个 Babel 输出，它将它包装在一些 IIFE 等网络中。

标签： javascript webpack babeljs

【解决方案1】：

webpack 有自己的方式来跟踪依赖关系并实际捆绑文件。
一个关键区别是webpack 的包中的每个模块都将包装在单独的函数闭包中（也许这就是您所指的，这个“额外”代码？）。
webpack v3 发布了一些几天前并支持一个新功能Scope Hoisting，此功能解决了上面提到的确切行为。
来自DOCS：

Scope Hoisting 是 webpack 3 的旗舰功能。webpack 的一个捆绑时的权衡是捆绑中的每个模块都是包裹在单独的函数闭包中。这些包装函数 JavaScript 在浏览器中的执行速度会变慢。在比较，像 Closure Compiler 和 RollupJS ‘hoist’ 这样的工具或将所有模块的范围连接到一个闭包中并允许让您的代码在浏览器中具有更快的执行时间...

这是文件大小的相关部分

因为作用域提升会移除你周围的函数包装器模块，您可能会看到一些小尺寸的改进。然而显着的改进将是 JavaScript 在浏览器...

【讨论】：