Angular 1.x 使用 webpack 配置

Question

未捕获的引用错误：未定义 myApp

我正在尝试使用 Angular 1.x 设置 Webpack，但出现上述错误。以下是我的配置设置和文件夹结构。让我知道 Webpack.

我做错了什么

文件夹结构 -

index.html 文件-

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Directives - Angular</title>
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
</head>
<body>
    <first-directive></first-directive>
    <second-directive></second-directive>
    <third-directive></third-directive>     
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

app.js

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

先-directive.js

myApp.directive('firstDirective', function() {
    return {
        template: '<h1>This is a first directive</h1>'
    }
})

webpack.config.js 文件-

module.exports = {
    entry: ["./app.js", "./directives/first-directive.js", "./directives/second-directive.js", "./directives/third-directive.js"],
    output: {
        filename: 'bundle.js'
    }   
};

此外，如果我像下面提到的那样使用通配符，它也不起作用。

entry: ["./app.js", "./directives/*"]

让我知道我在 webpack 配置方面做错了什么。

仅供参考 - bundle.js 看起来像这样 - http://codepad.org/Kd7P5Evy

Answer 1

根据评论，文件 first-directive.js 有一个变量 myApp，似乎是 undefined。

要更正此问题，您需要以下两种方式之一：

从app.js中导出模块的定义，并在first-directive.js中导入：

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

// first-directive.js
import {myApp} from './app';

myApp.directive('firstDirective', function() {
  return {
    template: '<h1>This is a first directive</h1>'
  }
});

从 first-directive.js 中导出指令的定义，并在 app.js 中导入它：

// first-directive.js
export function firstDirective() {
  return {
    template: '<h1>This is a first directive</h1>'
  };
}

// app.js
import {firstDirective} from './first-directive';

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

Angular 1.x 使用 webpack 配置

Angular 1.x with webpack configuration

javascript

angularjs

webpack

webpack-2