Question

我们正在将Webpack更新为使用版本4（当前使用3.8.1），但是我们陷入了此错误：

Unable to find module with ID: my-app

这是引导文件：

bootstrap(async (aurelia: Aurelia) => {
  aurelia.use
      .standardConfiguration()
      .plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
        config.useDefaults();
        config.settings.startingZIndex = 2000;
      })
      .plugin(PLATFORM.moduleName('aurelia-validation'), config => {
        config.customValidator(AjvValidator);
      });

  if (debugMode) {
    aurelia.use.developmentLogging();
  }

  await aurelia.start();
  await aurelia.setRoot(PLATFORM.moduleName('my-app'), document.getElementById('root'));
});

目录结构为

src -|
     |- ...directories (views, repositories, etc)
     |- bootstrap.ts
     |- my-app.html
     |- my-app.ts

如果我尝试将my-app设置为目录（包含index.ts和index.html文件），则错误会有所改变：

Unable to find module with ID: my-app.html

我尝试使用getViewStrategy指向index.html，但这没用。

如果在引导程序代码中，我更改为PLATFORM.moduleName('my-app/index')，则错误变为：

Unable to find module with ID: my-app/index

在这种情况下正确的设置是什么？

其他信息：

我们正在使用aurelia-webpack-plugin@3.0.0（NPM的最新版本）
这是启动命令：webpack-dev-server --config webpack.dev.config.js，在构建命令中也会发生错误

这是基本的webpack配置：

module.exports = (options) => ({
  context: path.resolve(__dirname, 'src'),
  mode: options.mode,
  entry: [
    'regenerator-runtime/runtime',
    'reflect-metadata',
    'babel-polyfill',
    'event-source-polyfill',
    `./scss/main-${options.product}.scss`,
    `./bootstrap-${options.product}.ts`
  ],
  output: Object.assign({
    sourceMapFilename: '[file].map'
  }, options.output),
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.tsx?$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => {
                return [
                  require('autoprefixer')({
                    browsers: ['> 5%', 'last 2 versions']
                  })
                ];
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'ts-loader']
      },
      {
        test: /\.html$/,
        use: options.product === PRODUCTS.styleguide.name ? ['raw-loader', 'highlightjs-loader'] : ['raw-loader']
      },
      {
        test: /\.(svg|png|ico)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {
              hash: 'sha512',
              digest: 'hex',
              name: options.imageNamePattern
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              optipng: {
                optimizationLevel: 7
              },
              gifsicle: {
                interlaced: false
              },
              mozjpeg: {
                bypassOnDebug: true
              }
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  plugins: options.plugins.concat([
    new AureliaPlugin({aureliaApp: undefined}/* {aureliaApp: undefined, includeAll: 'src'} */),
    // To strip all locales except “en”
    new MomentLocalesPlugin(),
    new webpack.IgnorePlugin(/regenerator|nodent|js-beautify/, /ajv/),
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch'
    }),
    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]),
  resolve: {
    alias: {
      ajv: path.join(__dirname, 'node_modules', 'ajv', 'dist', 'ajv.bundle.js'),
      pikaday: path.join(__dirname, 'node_modules', 'pikaday', 'pikaday.js'),
      'moment-timezone': path.join(
        __dirname,
        'node_modules',
        'moment-timezone',
        'builds',
        'moment-timezone-with-data.js'
      ),
      'raven-js': path.join(
        __dirname,
        'node_modules',
        'raven-js',
        'dist',
        'raven.js'
      )
    },
    extensions: ['.ts', '.js', '.scss', '.html'],
    modules: [srcDir, 'node_modules']
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
  optimization: {
    namedModules: true,
    splitChunks: {
      name: 'vendor',
      minChunks: 2
    }
  }
})

Answer 1

感觉就像您以Webpack无法解析my-app的方式对root / baseUrl进行别名/配置一样？您可以四处看看是否有这样的配置吗？

Answer 2

我遇到了同样的问题。对我来说，这是因为我在本地安装了插件，使用 npm install /path。发布插件后，我可以正常使用，如文档中所述。

Aurelia：找不到ID为：my-app

2 个答案: