时间戳

首页 > 解决方案 > Webpack 不会从另一个文件内联 const

javascript - Webpack 不会从另一个文件内联 const

问题描述

我有一个包含一些时间计算的文件。为了“干燥”，在它的顶部有一个

const HOUR_MS = 60 * 60 * 1000

在转译的输出中，每次HOUR_MS出现都内联36e5.

到目前为止，一切顺利^_^

但！如果我将此 const 提取到它自己的文件中，因为我想在更多地方重用它，这将不再有效。

相反，转译后的输出现在具有对该 const 的引用（例如r.HOUR_MS），这意味着它没有尽可能地缩小。

这是故意的行为（也许我可以用一些标志来抑制）​​还是优化疏忽？（正要报告，但他们的 GitHub 错误模板建议我先在这里问）

标签： javascriptwebpack

解决方案

这种现象是有问题的，但是由于多个层 (2) 一起工作以产生输出，所以这个壮举是不可行的。

这是因为import和export行为不同于CommonJS。无论如何，importandexport都是通过引用（即使是原始变量），而CommonJS不会操纵导出的值（因此，原始值不会被引用）。

证明import并export通过参考：

1.ts

export let number = 10;

export function increase() {
    number++;
}

2.ts

import {number, increase} from './1';

console.log(number);
increase();
console.log(number);

日志将打印 10, 11

第 1 层：TypeScript转译器

const number = 10;
console.log(number);

将转换为：

const number = 10;
console.log(number);

但

export const number = 10;
console.log(number);

将转换为：（这是问题开始的地方）

Object.defineProperty(exports, "__esModule", { value: true });
exports.number = 10;
console.log(exports.number);

第 2 层：uglify-es

const number = 10;
console.log(number);

将压缩到

console.log(10);

但

Object.defineProperty(exports, "__esModule", { value: true });
exports.number = 10;
console.log(exports.number);

将压缩到：（这是问题结束的地方）

Object.defineProperty(exports, "__esModule", { value: !0 });
exports.number = 10;
console.log(exports.number);

这就是为什么如果没有层之间的任何共同标准，这种优化将永远无法工作。

推荐阅读