gulp+webpack+angular 1のちょっとした経験(第2部webpackパッケージangular 1)

また一週間が過ぎて、プロジェクトも少し変わった.いくつかの小さな経験を集めて、みんなに分かち合って、漏れたところがあって、また指摘して、海涵を望んでいます.先週gulpとwebpackを統合しましたが、ツールの準備が悪くなったので、コードを始めましょう.コードのフレームワークはangularです(今はes 6が出ていますが、angular 2に合わせて実はクールで、興味のある友达が遊びに行きます.ここはangular 1です).どこから始まりますか.はい、私たちはまずangularを持っています.Webpackを通過させるには

require('angular');

インポートを完了します.それでは、私はまず公式サイトに行ってangularをダウンロードしました.jsファイル、そして私のwebpackのエントリファイルindex.jsにはこう書かれています.

require('./angular.js');

事実はこのように書くのが間違っていることを証明します...それから私はネット上の兄たちがどのように書くかを見て、彼らのコードの中では直接このようにしています.

require('angular');

npmでangularをインストールしました

npm install --save-dev angular

そして私はindexにいます.jsにはこう書かれています.

var angular = require('angular');
var App = angular.module("App",[]);

OK、これでいいです.では、angularにui-routerのプラグインを追加します.では、同じ方法を採用します.まず、

npm install --save-dev angular-ui-router

次に、

var angular = require('angular');
var uiRouter = require('angular-ui-router');
var App = angular.module("App",[uiRouter ]);

これで問題はありません.簡単に書いてください.

var angular = require('angular');
var App = angular.module("App",[
    require('angular-ui-router')
]);

では、私たちがカスタマイズしたmoduleはどのようにAppの依存に参加しますか?私たちが自分で書いたのはnpmでインストールすることはできません.もし私がindexにいたらjs(webpackのエントリファイル)の同級ディレクトリの下に、myModuleのようなモジュールファイルが書かれたフォルダmodulesがあります.js、これは有益な試みです.

var angular = require('angular');
var App = angular.module("App",[
    require('angular-ui-router'),
    require('./modules/myModule.js')
]);

　　myModule.jsの内容は以下の通りです.

    var angular = require('angular');

    /**
     *  *** 
     * @type {[type]}
     */
    var myModule = angular.module('myModule', []);
    myModule.controller('myModuleCtrl',function($scope,$http,$state,$stateParams) {
    // controller 
    });

そうですか.また間違えます.どうしてですか.WebpackがインポートしたモジュールはCMDまたはAMDの仕様に合致するため、このmoduleは明らかに一致しません.規範について:webpackチュートリアルと規範はこの規範の意味を理解しています.つまり、私たちのmyModuleはこのように書くべきです.

var angular = require('angular');
/**
 *  *** 
 * @type {[type]}
 */
var myModule = angular.module('myModule', []);
myModule.controller('myModuleCtrl',function($scope,$http,$state,$stateParams) {
// controller 
});
module.exports = myModule;

試してみたが、やはりだめだった.「module-is-not-a-function」という間違いを報告し、またstackOverflowで調べてみた.module is not a function 1をどのように解決するか、および:module is not a function 2をどのように解決するか.name、このように:

module.exports = myModule.name;

基本的には走れるようになりました.ここにはもう一つの穴があります.unknow providerはngAnnotateを使って解決します.ngAnnotateのgitアドレスはいいです.ここまで、angularをwebpackの環境で実行することができます.