使用 Moment TimeZone CDN 配置 WebPack答案

【问题标题】：Configuring WebPack with Moment TimeZone CDN使用 Moment TimeZone CDN 配置 WebPack
【发布时间】：2018-12-03 14:33:06
【问题描述】：

我正在使用 WebPack 4 来构建我的 TypeScript 应用程序。

我的一个模块使用moment-timezone 库，例如...

import * as moment from 'moment-timezone';
$('#label-locale').text(moment.locale());

这按预期工作。

为了更好地利用缓存，我想从 内容交付网络 (CDN) 引用 moment 和 moment-timezone，并将以下内容添加到我的 HTML 页面：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js"></script>

我还修改了webpack.config.js如下：

module.exports = {
    externals: {
        'jquery': 'jQuery',
        'moment': 'moment-timezone'
    }
};

现在，当我运行我的代码时，我收到以下错误：

ReferenceError: timezone is not defined

我是 WebPack 的新手，并尝试过将 'timezone': 'moment-timezone' 添加到 externals 之类的方法，但均未成功。

非常感谢任何帮助/指导。

【问题讨论】：

'moment-timezone': 'moment-timezone'?

标签： webpack momentjs webpack-4 moment-timezone

【解决方案1】：

我想太多了。 moment-timezone 实际上“只是”扩展了 moment 对象以包含 moment.tz，所以我所要做的就是修改 webpack.config.js 如下：

module.exports = {
    externals: {
        'jquery': 'jQuery',
        'moment-timezone': 'moment'
    }
};

因此，moment 对象已经被 CDN 引用更新，而不是 WebPack 有效地构建来自 node_modules/moment-timezone 的整个定义树。至少，我认为这是正在发生的事情。

【讨论】：