Question

在阅读了关于browserify vs webpack的几百行之后，以及几个如何解决这两个问题，我决定去webpack。这是因为我喜欢将所有内容捆绑到js文件中的主要原因。

我有一个角度项目已经工作，我想重构它为webpack。问题？我的项目使用角度1.4.7，ng-animate和普通javascript（ES5），所有教程和手册都适用于ES6。我不想那么重构我的项目。怎么走？我想要一个每个角度模块的例子：工厂，指令，控制器等。非常感谢

Answer 1

我通常有一个feature.module.js文件，它有我的模块定义，需要模块中包含的所有指令/服务。也有外部依赖。

/* module.js */
angular.module('my.module',['dependancy1', 'dependancy2']);

//External libraries
require('./dependancy1.module.js');
require('./dependancy2.module.js');

//Internal components
require('./thing.directive');
require('./thing.service';

       
/* service.js */
angular.module('my.module')
    .directive('yourDir', function myDir(){...});

Answer 2

我现在处理同样的问题。我发现了一些有效的东西（正在进行中，但至少我可以看到进展）。我的步骤：

安装yeoman
运行this angular-webpack generator。选择＆＃39; ES5＆＃39;当被问到时（另一种选择是＆＃39; ES2015＆＃39;，我猜这与＃ES;＆＃39;）
使用Angular代码

是的，你仍然需要了解gulp和sass，但至少你可以使用旧的ES5语法运行一个简单的AngularJS应用程序，并开始修改它。

我可能在博客上写这篇文章。所以，我会更新这个答案。

Answer 3

我倾向于这样做：

app.js：

require('/any/angular/deps');
var subModule = require('/some/sub/module');

var app = angular.module('myApp', []);

// pass the app module in sub modules to allow them to define their own config
subModule.configure(app);

/subModule/module.js：

var someSubDirective = require('./subDir/directive');

export function configure(app) {

   someSubDirective.configure(app);

}

/subModule/subDir/directive.js：

export function configure(app) {
   app.directive('myDir', myDir);
}

function myDir() {

}

我的想法是让所有子模块处理他们自己的配置，因此声明config或constant，factories或providers。然后让它冒泡到app.js.这意味着从结构中删除文件夹非常容易，因为它从父模块中删除了一行。

这也使相关的文件路径更短，更容易处理。

带有角度1.x和ES5的Webpack

3 个答案: