egghead.io webpack 角度教程答案

【问题标题】：egghead.io webpack angular tutorialegghead.io webpack 角度教程
【发布时间】：2017-02-01 18:50:16
【问题描述】：

我对来自 egghead.io 的教程 webpack-angular 有疑问。我在第 3 步“ES6 with Babel”。

我需要你的帮助，因为我想解决它。

我正在关注你的教程，我在这一步中冻结了：

这是 Chrome devTool 出现错误的消息

...........

bundle.js:17416 Uncaught TypeError: __webpack_require__(...) is not a function(anonymous function) @ bundle.js:17416__webpack_require__ @ bundle.js:20Object.defineProperty.value @ bundle.js:66(anonymous function) @ bundle.js:69
Navigated to http://localhost:8080/

指令“Hello webpack！”没有显示

…………

这是 package.json 文件：

{
  "name": "webpack-angular",
  "version": "1.0.0",
  "description": "Example of using webpack",
  "main": "app/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\"",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app"
  },
  "keywords": [
    "webpack",
    "angular",
    "egghead.io"
  ],
  "author": "Pablo B.",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^1.16.2"
  }
}

.......

这是 webpack.config.js 文件：

module.exports = {
  context: __dirname + '/app',
  entry:  './index.js',
  output:{
    path: __dirname + '/app',
    filename: 'bundle.js'
  },
  module:{
    loaders:[
      { test: /\.js$/, loader: 'babel-loader'}
    ]
  }
}

这是终端运行 npm start 命令后的结果。

webpack npm 启动

webpack-angular@1.0.0 开始 /home/pablo/Documents/tutoriales/webpack 节点 node_modules/.bin/webpack-dev-server --content-base app

http://localhost:8080/webpack-dev-server/ webpack 结果被提供来自 / 内容来自 /home/pablo/Documents/tutoriales/webpack/app [BABEL] 注意：代码生成器已经对样式进行了优化 “/home/pablo/Documents/tutoriales/webpack/node_modules/angular/angular.js” 因为它超过了“500KB”的最大值。哈希：69ba24ec3148fc14b2e7 版本： webpack 2.2.1 时间：3976ms 资产大小块块名称 bundle.js 1.11 MB 0 [emitted] [big] main chunk {0} bundle.js (main) 1.1 MB [entry] [rendered] [0] ./app/directives/index.js 69 字节 {0} [内置] [1] ./~/angular/index.js 47 字节 {0} [内置] [2] ./app/directives/kcd-hello.js 391 字节 {0} [内置] [3] ./~/angular/angular.js 1.1 MB {0} [内置] [4] ./app/index.js 114 字节 {0} [built] webpack：bundle 现在有效。

有什么想法吗？

主要问题是显示指令“Hello Webpack！”。为什么我会收到 webpack 要求错误？

提前致谢。

亲切的问候

【问题讨论】：

标签： javascript angularjs node.js webpack

【解决方案1】：

我自己修好了。我改变了这样做的方式。

之前：

const angular = require('angular'); 
const ngModule = angular.module('app',[]); 
require('./directives')(ngModule);

之后：

const angular = require('angular'); 
const ngModule = angular.module('app',[]);
require('./directives').default(ngModule);

【讨论】：

【解决方案2】：

您是否正确地将 babel 注入到您的应用程序中？有时这与节点模块名称解析不正确有关。看起来您拥有所有必需的 ES6 组件。

【讨论】：

这是我在index.js文件export default ngModule => { require('./kcd-hello')(ngModule); };使用BAbel的方式@
module.exports = function(ngModule){ ngModule.directive('kcdHello',function(){ var directive = {}; directive.restrict = 'E'; directive.scope = {}; directive.templateUrl= "directives/kcd-hello.html", directive.controllerAs = "vm"; directive.controller = function(){ var vm = this; vm.greeting = "Hello Webpack!"; } return directive; }) }
我应该通过导出默认ngModule来改变我使用module.exports的所有方式吗？？？？本教程只是更改了这个文件。
我自己修好了。我改变了这样做的方式。之前：const angular = require('angular'); const ngModule = angular.module('app',[]); require('./directives')(ngModule); 之后 const angular = require('angular'); const ngModule = angular.module('app',[]); require('./directives').default(ngModule);