gulp+webpack+angular1的一點小經驗(第二部分webpack包起來的angular1)
又一週過去了,專案也已經做得有點模樣了。收集來一些小經驗,分享給大家,有疏漏之處,還望指正,海涵。
上週整合了gulp與webpack,那麼工具準備差不多了,我們就開始編碼吧。編碼的框架就是angular了(現在已經出了es6了,配合angular2其實很酷,有興趣的朋友們去玩嘍,這裡還是angular1)。
從哪開始呢?對的,我們要先有個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的入口檔案)的同級目錄下,有個資料夾modules,裡邊放的是寫好的模組檔案如myModule.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的環境下執行起來了。