javascript - webpack 导出默认有效，而导出对象则无效

Question

我正在尝试通过 AngularJS 使用实现 webpack。

当我在生产环境中构建并运行应用程序时，会抛出一个错误，指出我的家庭 Controller 未知。好吧，这取决于我如何导出我的 HomeController 类。

下面的示例不起作用。

// home.controller.js
export class HomeController {
    constructor() {
        this.title = 'Home';
    }
}

// index.js
import { HomeController } from './home.controller.js';

angular.module('home', []).controller('HomeController', HomeController);

<小时/>

下面的示例有效。

// home.controller.js
export default class HomeController {
    constructor() {
        this.title = 'Home';
    }
}

// index.js
import HomeController from './home.controller.js';

angular.module('home', []).controller('HomeController', HomeController);

<小时/>

这是我用来转译 JS 的规则

{
   test: /\.js$/,
   exclude: /(node_modules|server.js)/,
   use: [{
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-classes']
      }
   }]
}

这可能是 webpack 的错误还是我的规则有问题？

编辑。

导出默认值也不起作用。仅当我在与模块相同的文件中声明该类时，它才有效。

class HomeController {
    constructor() {
        this.title = 'Home';
    }
}

angular.module('home', []).controller('HomeController', HomeController);

Answer 1

我发现了这个问题。

我忘记了 Controller 类中的“注释”“ngInject”；

class HomeController {
    constructor($timeout) {
        "ngInject"; // <- this is the line I forgot.
        this.title = 'Home';
    }
}

当我使用webpack-dev-server时，它可以在没有“ngInject”的情况下工作，这很奇怪。无论如何它应该抛出一个错误。

这也是我的错误，因为我没有准确地表明我正在使用依赖项。在我的 Controller 中。

感谢您的帮助。