AngularJS的Webpack插件和/或策略 [英] Webpack plugins and/or strategies for AngularJS

问题描述

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

I have an AngularJS 1.7 project currently being built with Gulp, and I'm looking into switching it over to Webpack. After some initial poking around, I'm finding it difficult to find and load all the source files, due to the fact that it's written in a style from before CommonJS and ES6 modules. My hunch is that it's a common (but old) style of Angular, but I'm new to it so I'm not sure.

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

The Question: Is there a Webpack plugin or tool or strategy for building Angular 1 projects? I'm hoping there's a plugin that is smart enough to pull in all the template files, controllers, directives, services, and so forth without needing to do a lot of configuration.

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

Specifically, I'm looking for "Use this 1 tool that's exactly what you need", as opposed to "Follow these 20 steps". It's not that I'm lazy, just that I'm confident I can figure out all the required steps, but before I go that route I want to make sure I'm not missing some plugin that does it all for me. And, I don't want to waste anyone else's time writing up the steps.

参考信息

文件结构

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

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

Note the way the templates are put in the same directory as the component controller.

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

Here's a snippet from the routes file showing how a template is referenced:

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

Note the use of templateUrl and it's a string path. The actual file is a template, and as far as I can tell, the existing Gulp builder uses a glob to find all the .tpl templates and then sends them to nghtml2js to combine into a single .js

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

I'm hoping there's something similar that's been written for Webpack that takes a standard Angular 1 project structure and builds all the required outputs.

推荐答案

我不确定这是否是完整的答案，但是

I'm not sure it's really the full answer, but the import-glob npm package made a big difference. I was able to create a single import.js that then imports everything I need.

import.js

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

关于导入模板，我也进行了一些更新:

I'm also updating it a little with regards to importing the templates:

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能够找到所有源文件.

By importing everything this way, Webpack is able to find all the source files.

这篇关于AngularJS的Webpack插件和/或策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！