带有 Angular 1.x 和 ES5 的 Webpack

Posted 2023-02-22

【中文标题】带有 Angular 1.x 和 ES5 的 Webpack

【英文标题】：Webpack with angular 1.x and ES5

【发布时间】：2016-02-01 02:55:27

【问题描述】：

在阅读了数百行关于 browserify 和 webpack 的内容以及两者中的几个方法之后，我决定使用 webpack。主要原因是我喜欢将所有内容捆绑到 js 文件中的想法。

我有一个 Angular 项目已经在运行，我想为 webpack 重构它。问题？我的项目使用 Angular 1.4.7、ng-animate 和纯 javascript (ES5)，所有教程和手册都适用于 ES6。我不想过多地重构我的项目。怎么走？我想要每个角度模块的示例：工厂、指令、控制器等。非常感谢

【问题讨论】：

我也有同样的问题！目前我正在 Angular 1.x ES5 项目中工作，我无权将其重构为 es6

【参考方案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()...);
                                           
                                           

【讨论】：

这似乎是一个很好的答案，但是我感觉它缺少一些细节，比如service.js是如何与module.js相关的，它是否使用了另一个require？您在主应用程序上需要哪一个？能否请您添加这些详细信息

【参考方案2】：

我倾向于这样做：

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。这意味着从你的结构中删除一个文件夹真的很容易，因为它是从它的父模块中删除一行。

这也使相关文件路径更短且更易于处理。

【讨论】：

删除是一行编辑，但要注意很多级联依赖。我认为 webpacks 将每个模块封装到一个闭包中，但我不太喜欢使用 app=angular.module(... 的想法而且我发现顶部的需求和底部的配置调用很麻烦。我不是在责怪你的解决方案，我觉得它很好，但我认为很容易错过一些要求或配置并让人头疼

【参考方案3】：

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

安装yeoman 运行this angular-webpack generator。询问时选择“ES5”（另一个选项是“ES2015”，我猜它与“ES6”相同） 开始使用您的 Angular 代码修改自动生成的样板文件

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

我可能正在写博客。所以，我会更新这个答案。

【讨论】：

那篇博文还在制作中吗？