介绍了如何用webpack构建ng1+es6应用, 原文: Creating an application with AngularJS 1.4, ECMAScript 6, Material Design and Webpack

来学一下如何用ng1.4, es6, material design和webpack来做一个应用吧!

angular1.4发布了.(现在1.x的最后版本是1.5.8, 1.5.9好像僵死在了beta).

现在要介绍一个新的路由: 一个由Pascal Percht开发的类似于angular-translate的转换系统, 加强了webpack, 没有‘劫持’的Browserify支持(CommonJS)(Browserify就是在web应用里可以像node一样require lib的一个lib). 你可以像这样直接import angular:

1
import 'angular/angular.js';

而不是这样:

1
require('expose?angular!exports?window.angular!angular/angular.js');

DEMO

这是demo地址


基本配置

依赖(package.json)

这个教程里我们会使用AngularJS,Angular Material,UI router(一个还没能可以上生产的路由)(其实现在早可以上了, 这文章在一年前, 作者眼光真是厉害)和icon library.

1
2
3
4
5
6
7
8
"dependencies": {
"angular": "~1.4.0",
"angular-animate": "~1.4.0",
"angular-aria": "~1.4.0",
"angular-material": "^0.10.1",
"angular-ui-router": "^0.2.14",
"font-awesome": "^4.3.0"
}

Webpack

如果你想知道webpack是干嘛的, 我建议你看我的上篇博客.

我们要让webpack的加载器去编译es6并处理css和html文件.

1
2
3
4
5
6
7
8
"devDependencies": {
"babel-loader": "^5.0.0",
"css-loader": "^0.12.0",
"file-loader": "^0.8.1",
"html-loader": "^0.3.0",
"html-webpack-plugin": "^1.3.0",
"style-loader": "^0.12.1"
}

webpack.config.js也是不能再简单了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = {
entry: './lib/index.js',
output: {
path: './www',
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './lib/index.html'
})
]
};

入口文件(lib/index.js)

下面这个入口文件集合了我们应用的所有基本依赖的库: Angular, Material Design, 路由和icon.
我们用import这个es6的引入CommonJS模块的语法, 注入了angularMaterialangularUIRouter作为模块依赖并输出默认模块.
(你可以在单个文件输出多个模块, 如果没指定import那么获取到的就是默认模块.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Import angular
import 'angular/angular.js';
// Material design css
import 'angular-material/angular-material.css';
// Icons
import 'font-awesome/css/font-awesome.css';
// Materail Design lib
import angularMaterial from 'angular-material';
// Router
import angularUIRouter from 'angular-ui-router';

// Create our demo module
let demoModule = angular.module('demo', [
angularMaterial,
angularUIRouter
])

export default demoModule;

index.html

index.html要做2件事. 一个是启动应用(就是ng-app="demo"), 另外是引入js文件.(src="{\%=o.htmlWebpackPlugin.assets[chunk]\%}").

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
<body ng-strict-di ng-app="demo">
{% for (var chunk in o.htmlWebpackPlugin.assets) { %}
<script src="{%=o.htmlWebpackPlugin.assets[chunk]%}"></script>
{% } %}
</body>
</html>

你现在应该已经让你的demo模块运行了. 为确信他已经运行让我们在入口文件添加一个打log的代码吧:

1
2
3
demoModule.run(($log) => {
$log.info('demo running');
})

然后看一下控制台!


继续

创建你自己的模块

你的应用已经运行了, 我们来用es6创建一个home模块吧!

1
2
3
4
// Create a new module
let homeModule = angular.module('demo.home', []);
// Named export is needed to inject modules directly as Angular dependencies
export default homeModule = homeModule.name

和别的模块一样地注入:

1
2
3
4
5
6
7
8
import home from './home/home.module.js';

// Create our demo module
let demoModule = angular.module('demo', [
angularMaterial,
angularUIRouter,
home
])

我们建立一个controller./home/controller来让我们新的模块引入:

1
2
3
export default function($scope) {
'ngInject';
}

ngInjectng-annotate的注释, 让angular可以进入严格模式, 预知详情可以复制以下链接http://julienrenaux.fr/2015/01/18/angularjs-1-x-open-source-projects-to-follow-in-2015/#Ng-Annotate

我们可以这样引入方法:

1
2
3
4
5
6
7
let homeModule = angular.module('demo.home', []);

import HomeController from './home.controller';

homeModule.controller('HomeController', HomeController);

export default homeModule = homeModule.name


DEMO地址

demo