Webpack UMD：关键依赖...无法静态提取答案

【问题标题】：Webpack UMD: Critical dependency... cannot be statically extractedWebpack UMD：关键依赖...无法静态提取
【发布时间】：2016-11-18 11:06:03
【问题描述】：

我正在尝试使用 webpack 构建一个 umd 库；不管我做什么都会收到警告：

D:/Code/Node/sample.io/source/index.ts 中的警告 3:24 关键依赖：require 函数的使用方式不能静态提取依赖

当我尝试require('./index.js') 生成的 index.js 时，我得到：

错误：找不到模块“。”

为了完整起见，这里是我所有的文件：

webpack.config.js：

module.exports = {
  entry: {
    index: __dirname + '/index'
  },
  output: {
    filename: 'index.js',
    library: 'mylib',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  resolve: {
    root: __dirname,
    extensions: ['', '.ts', '.js'],
  },
  module: {
    loaders: [
      { test: /\.ts$/, loaders: ['awesome-typescript-loader'] }
    ]    
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "umd"
  },
  "exclude": [
    "node_modules"
  ]
}

package.json：

{
  "name": "foo",
  "version": "0.1.0",
  "devDependencies": {
    "awesome-typescript-loader": "^2.0.2",
    "typescript": "^2.0.0",
    "webpack": "^2.1.0-beta.17"
  }
}

index.ts：

export function MyFunc(params) {
  console.log("hello world");
}

node -v = v6.3.0
npm -v = 3.7.5

奇怪的是，我的一个朋友说这对他们来说没有错误。虽然他在node 4.2.6。如果我将模块更改为 commonjs，它可以正常工作而不会出现警告或错误。

【问题讨论】：

标签： typescript webpack umd

【解决方案1】：

我认为你需要在 tsconfig 中使用"module": "commonjs"，所以 typescript 编译会发出 webpack 可以理解的模块，你仍然会从 webpack 获得 umd 输出

希望对你有帮助

【讨论】：

太棒了，我一直认为 ts 需要输出 UMD。谢谢：D
如果它不是你的仓库怎么办？
如果我需要导入 UMD npm 模块怎么办？
@zixia 尝试在您的webpack.config.js 文件的output 块中添加libraryTarget: 'umd'。它在webpack docs 中有描述

【解决方案2】：

如果您无法将 module 从 umd 更改为 commonjs，因为您只是在使用它，并且您无权访问源代码，您可以使用 umd-compat-loader 作为解决方法。将以下rule 添加到您的webpack.config.js：

module: {
    rules: [
        // other rules come here.
        {
            test: /node_modules[\\|/](name-of-the-umd-package)/,
            use: { loader: 'umd-compat-loader' }
        }
    ]
},

我在thread 中添加了更多细节。

【讨论】：