Question

尝试从旧架构迁移到模块化世界，并使用带有Three和Angular的npm的posprocessing包。

从后处理导入模块时，会出现以下错误：

Failed to compile.

./~/postprocessing/src/materials/adaptive-luminosity/glsl/shader.frag
Module parse failed: (...)/materials/adaptive-luminosity/glsl/shader.frag Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
| uniform sampler2D tPreviousLum;
| uniform sampler2D tCurrentLum;
| uniform float minLuminance;
 @ ./~/postprocessing/src/materials/adaptive-luminosity/index.js 3:0-42
 @ ./~/postprocessing/src/materials/index.js

我假设它与Angular cli设置有关。知道如何启用导入自定义文件扩展名吗？

Answer 1

好像您正在尝试导入webgl片段。完全披露，我不太了解他们。但是，问题是webpack（在angular-cli中隐藏的配置）没有加载程序来处理要导入的文件类型.frag

在这里阅读加载器：https://webpack.js.org/concepts/loaders/

如果您真的希望使用angular-cli

，那么您可以做什么

弹出angular-cli应用程序以输出webpack配置：https://github.com/angular/angular-cli/wiki/eject
将glslify-loader添加到webpack config：https://github.com/stackgl/glslify-loader

来自glslify-loader doc：

npm install --save glslify-loader raw-loader

然后在webpack配置文件的loaders部分中添加：

    loaders: [
      { test: /\.(glsl|frag|vert)$/, loader: 'raw', exclude: /node_modules/ },
      { test: /\.(glsl|frag|vert)$/, loader: 'glslify', exclude: /node_modules/ }
    ]
  }

模块内的自定义文件使用Angular导入

1 个答案: