代码之家  ›  专栏  ›  技术社区  ›  JeB

Webpack 4通用库目标

  •  27
  • JeB  · 技术社区  · 6 年前

    根据 Webpack 4 documentation ,如果我指定 libraryTarget:“umd” 它应产生以下输出:

    (function webpackUniversalModuleDefinition(root, factory) {
      if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
      else if(typeof define === 'function' && define.amd)
        define([], factory);
      else if(typeof exports === 'object')
        exports["MyLibrary"] = factory();
      else
        root["MyLibrary"] = factory();
    })(typeof self !== 'undefined' ? self : this, function() {
      return _entry_return_;
    });
    

    然而,我得到的是:

    (function webpackUniversalModuleDefinition(root, factory) {
        if(typeof exports === 'object' && typeof module === 'object')
            module.exports = factory();
        else if(typeof define === 'function' && define.amd)
            define("lib", [], factory);
        else if(typeof exports === 'object')
            exports["lib"] = factory();
        else
            root["lib"] = factory();
    })(window, function() {
    return
    

    更准确地说,不是这个
    (typeof self !== 'undefined' ? self : this, function()
    我明白了:
    (window, function()

    这(显然)会导致运行时错误 window is undefined 在节点环境中导入时。

    需要明确的是:
    我知道 window 节点应用程序中不存在。我的问题不是关于这个,而是关于 网页包

    是虫子还是我遗漏了什么?

    我的输出配置:

    output: {
        path: resolve(__dirname, 'umd'),
        filename: 'lib.js',
        libraryTarget: 'umd',
        library: 'lib',
        umdNamedDefine: true,
    },
    
    2 回复  |  直到 6 年前
        1
  •  39
  •   JeB    5 年前

    这将是一个 bug 在里面 网页包4
    网页包3 生成适当的捆绑包。

    此问题应使用修复 this 功能,直到完成为止,建议的解决方法是使用 globalObject :

    output: {
        path: resolve(__dirname, 'umd'),
        filename: 'lib.js',
        libraryTarget: 'umd',
        library: 'lib',
        umdNamedDefine: true,
        globalObject: `(typeof self !== 'undefined' ? self : this)`
    },
    
        2
  •  6
  •   v.babak    5 年前

    根据 docs 包括 output.globalObject 进入 网页包。配置。js公司 :

    module.exports = {
      output: {
        libraryTarget: 'umd',
        globalObject: 'this'
      }
    }
    

    使UMD构建在浏览器和节点上都可用。js,设置输出。“this”的全局对象选项。