Webpack UMD:关键依赖项.无法静态提取

0pizxfdo  于 2023-11-19  发布在  Webpack
关注(0)|答案(3)|浏览(235)

我正在尝试使用webpack构建一个umd库;不管我做什么,都会得到一个警告:
在D:/Code/Node/sample.io/source/index.ts 3:24 Critical dependency:require函数的使用方式使依赖项无法静态提取
当我尝试require('./index.js')生成的index.js时,我得到:
错误:找不到模块“。”

  • 为完整起见,这里是我的所有文件:*
    webpack.config.js:
  1. module.exports = {
  2. entry: {
  3. index: __dirname + '/index'
  4. },
  5. output: {
  6. filename: 'index.js',
  7. library: 'mylib',
  8. libraryTarget: 'umd',
  9. umdNamedDefine: true
  10. },
  11. resolve: {
  12. root: __dirname,
  13. extensions: ['', '.ts', '.js'],
  14. },
  15. module: {
  16. loaders: [
  17. { test: /\.ts$/, loaders: ['awesome-typescript-loader'] }
  18. ]
  19. }
  20. }

字符串

tsconfig.json:

  1. {
  2. "compilerOptions": {
  3. "target": "es5",
  4. "module": "umd"
  5. },
  6. "exclude": [
  7. "node_modules"
  8. ]
  9. }

package.json:

  1. {
  2. "name": "foo",
  3. "version": "0.1.0",
  4. "devDependencies": {
  5. "awesome-typescript-loader": "^2.0.2",
  6. "typescript": "^2.0.0",
  7. "webpack": "^2.1.0-beta.17"
  8. }
  9. }

index.ts:

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

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

奇怪的是,我的一个朋友说这对他们来说没有错误。虽然他是在node 4.2.6上。如果我把模块改成commonjs,它工作得非常好,没有警告或错误。

vof42yt1

vof42yt11#

我认为你需要在tsconfig中使用"module": "commonjs",这样typescript编译将发出webpack可以理解的模块,你仍然可以从webpack中获得umd输出。
希望这有帮助

wtzytmuj

wtzytmuj2#

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

  1. module: {
  2. rules: [
  3. // other rules come here.
  4. {
  5. test: /node_modules[\\|/](name-of-the-umd-package)/,
  6. use: { loader: 'umd-compat-loader' }
  7. }
  8. ]
  9. },

字符串
我在这个帖子里添加了一些细节。

kdfy810k

kdfy810k3#

如果您无法修复根本原因,并且只想抑制此特定文件的警告,请将此添加到您的webpack配置中(确保将其更改为导致警告的文件):

  1. {
  2. // The rest of your webpack config...
  3. ignoreWarnings: [
  4. {
  5. module: /regex of the file name causing the warning/,
  6. },
  7. ]
  8. }

字符串
或者,您也可以通过消息隐藏警告。例如,要隐藏包含“严重依赖关系”的警告,请执行以下操作:

  1. {
  2. // The rest of your webpack config...
  3. ignoreWarnings: [/Critical dependency/],
  4. }

展开查看全部

相关问题