Question

我有一个正在用Gulp构建的AngularJS 1.7项目，我正在考虑将其切换到Webpack。经过一番初步摸索后，我发现很难找到和加载所有源文件，因为它是采用CommonJS和ES6模块之前的样式编写的。我的直觉是这是Angular的常见（但较旧）样式，但是我是新手，所以我不确定。

问题：是否存在用于构建Angular 1项目的Webpack插件或工具或策略？我希望有一个足够聪明的插件，无需进行大量配置即可提取所有模板文件，控制器，指令，服务等。

特别是，我正在寻找“使用这1正是您需要的工具”，而不是“遵循这20个步骤”。这并不是说我很懒，只是我相信我能找出所有必需的步骤，但是在我走那条路线之前，我想确保我不会缺少一些能为我完成全部工作的插件。而且，我不想浪费别人的时间来编写步骤。

参考信息

文件结构

- src
  - components
    - hometile
      -- hometile.css
      -- hometile.drct.js
      -- hometile.tpl.html
  - services
    - capabilities.fct.js

请注意将模板放置在与组件控制器相同的目录中的方式。

以下是来自路由文件的摘录，显示了如何引用模板：

app.routes.js

$routeProvider.
    when('/home', {
        templateUrl: 'sections/home/home.tpl.html',
        controller: 'HomeController as home',
        resolve: {
            commonData: function(MyService) {
                return MyService.getCommonData();
            }
        }
    })

请注意 templateUrl 的使用，它是一个字符串路径。实际文件是一个模板，据我所知，现有的Gulp构建器使用glob查找所有.tpl模板，然后将它们发送到 nghtml2js ，以合并为一个.js < / p>

我希望为Webpack写一些类似的东西，它采用标准的Angular 1项目结构并构建所有必需的输出。

Answer 1

我不确定这是否是完整的答案，但是import-glob npm软件包产生了很大的不同。我能够创建一个import.js文件，然后导入我需要的所有内容。

import.js

import './services/**/*.js';
import './directives/**/*.js';
import './controllers/**/*.js';

关于导入模板，我也做了一些更新：

import template from './sections/home/home.tpl.html';

$routeProvider.
when('/home', {
    templateUrl: template,
    controller: 'HomeController as home',
    resolve: {
        commonData: function(MyService) {
            return MyService.getCommonData();
        }
    }
})

通过这种方式导入所有内容，Webpack能够找到所有源文件。

AngularJS的Webpack插件和/或策略

1 个答案: