首页 文章

Webpack UMD:严重依赖...无法静态提取

提问于
浏览
4

我正在尝试使用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,它可以完美地工作,没有警告或错误 .

2 回答

  • 13

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

    希望这可以帮助

  • 2

    如果您无法将 moduleumd 更改为 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添加了一些细节 .

相关问题