时间戳

首页 > 解决方案 > 如何强制 webpack 使用“浏览器”方法加载库？

javascript - 如何强制 webpack 使用“浏览器”方法加载库？

问题描述

我正在尝试将使用 bower 和 usemin 的遗留项目迁移到 webpack 4。第一步，我只想创建所有 JavaScript 代码的包。为此，我创建了index.js以这种形式放置所有脚本的位置

window.moment = require('./bower_components/moment/moment.js');
require('imports-loader?define=>false,this=>window!' +
    './bower_components/moment-timezone/builds/moment-timezone-with-data-2010-2020.js');

我为遗留库使用导入和导出加载器。我的问题是一些库试图像这样加载/导入依赖项

(function (root, factory) {
    "use strict";

    /*global define*/
    if (typeof define === 'function' && define.amd) {
        define(['moment'], factory);                 // AMD
    } else if (typeof exports === 'object') {
        module.exports = factory(require('moment')); // Node
    } else {
        factory(root.moment);                        // Browser
    }
}(this, function (moment) {
...
}

当 webpack 尝试加载此类库时，第二个 if 子句给出true，webpack 尝试加载依赖 usingrequire()语句。

使用imports-loader?define=>false我可以强制库不要尝试 AMD 方法。但我不知道如何跳过使用require(). 我尝试使用 imports-loader?define=>false,exports=>false，但它不起作用。

是否可以禁用节点方法？例如将导出设置为false.

我还尝试resolve.alias: {'libname', 'path/to/lib'}在 webpack 配置中使用选项。但是这种方式在某些情况下会导致 webpack 尝试导入依赖项两次或更多次并破坏代码的情况。

标签： javascriptwebpack-4

解决方案

您必须设置exports为false：

require('imports-loader?define=>false,exports=>false,this=>window!' +
    './bower_components/moment-timezone/builds/moment-timezone-with-data-2010-2020.js');

这应该使typeof exports === 'object'条件为假。

推荐阅读