笔者在之前的开发流中习惯了Webpack+ES6+React的Workflow,Angular2本身也是秉持的模块的思想,因此笔者在学习Angular2的时候首先想到的也就是将原本流程里的React变为Angular2。Angular2官网上的Quick Start是用的TypeScript,准确的说,是AtScript的规范。Angular2本身引入了大量的第三方库,就像官方示例上面的,有JSPM的System、Reflect等等,这也给搭建环境时造成了一定的困扰。本节的代码笔者已经上传到了Github。Webpack的安装与基本使用就不在这边赘述,没学过的小伙伴可以看笔者其他的博文。
Setup
Directory(文件目录)
|package.son 存放nom相关的配置
|webpack.config.js 存放webpack相关的配置
|assets 存放代码以及资源文件
├── common 存放通用的资源文件
│ ├── font 字体文件
│ ├── css 通用样式文件
│ └── img 图片文件
├── components 组件
│ ├── hello
│ │ └── hello.js
│ └── helloTemplate
│ ├── helloTemplate.html
│ └── helloTemplate.js
├── main.js 入口文件
├── models 模型以及数据类
├── services 服务
├── utils 工具类
└── widgets 界面插件类
package.json
搭建环境需要大量的Npm依赖项,都列举在了下面:
{
"name": "angular2-es6-webpack-quickstart",
"version": "0.0.1",
"description": "repository for starter with angular2,es6 and webpack",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"angular2",
"es6",
"webpack"
],
"author": "chevalier",
"license": "ISC",
"dependencies": {
"angular2": "^2.0.0-alpha.37",
"reflect-metadata": "^0.1.1",
"rx": "^2.5.3",
"zone.js": "^0.5.4"
},
"devDependencies": {
"a1atscript": "^0.4.4",
"autoprefixer-loader": "^2.0.0",
"babel": "^5.8.23",
"babel-core": "^5.8.23",
"babel-loader": "^5.3.2",
"css-loader": "^0.16.0",
"file-loader": "^0.8.4",
"image-webpack-loader": "^1.6.1",
"imagemin": "^3.2.0",
"node-sass": "^3.3.2",
"react-mixin": "^1.7.0",
"sass-loader": "^2.0.1",
"scss-loader": "^0.0.1",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"typescript": "^1.6.0-beta",
"typescript-simple-loader": "^0.3.7",
"es6-shim": "^0.33.1",
"ng-annotate": "^1.0.2",
"raw-loader": "^0.5.1",
"ng-annotate-webpack-plugin": "^0.1.2"
}
}
webpack.config.js
存放Webpack配置:
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'assets/main.js'),
// Config for our build files
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.jsx$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
{test: /\.(es6|js)$/, exclude: /(libs|node_modules)/, loader: 'babel?stage=0'},
{test: /\.(png|jpg|ttf|woff|svg|eot)$/, loader: 'url-loader?limit=8192'},// inline base64 URLs for <=8k images, direct URLs for the rest
{
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions'
},
// support for .html as raw text
{test: /\.html$/, loader: 'raw'},
{
test: /\.(scss|sass)$/,
loader: 'style-loader!css-loader!autoprefixer-loader?browsers=last 2 versions!sass?sourceMap'
},
{
test: /\.ts$/,
exclude: /(libs|node_modules)/,
loader: 'typescript-simple',
query: {
'ignoreWarnings': [
2300, // 2300 -> Duplicate identifier
2309, // 2309 -> An export assignment cannot be used in a module with other exported elements.
2346, // 2346 -> Supplied parameters do not match any signature of call target.
2432 // 2432 -> In an enum with multiple declarations, only one declaration can omit an initializer for its first enum element.
]
}
}
],
},
externals: {
jquery: "jQuery",
pageResponse: 'pageResponse'
},
resolve: {
alias: {
libs: path.resolve(__dirname, 'libs'),
nm: path.resolve(__dirname, "node_modules")
}
}
};
HelloWorld
环境搭建完毕,自然要开始写我们的HelloWorld。这里组件的模块化以及引入都是用的ES6的语法,然后通过Webpack统一编译。利用Webpack同样可以支持AtScript的语法:
hello.js
/**
* Created by apple on 15/9/14.
*/
import 'nm/reflect-metadata/Reflect.js';
import 'nm/zone.js/lib/zone.js';
import 'nm/es6-shim';
import { Component, View, bootstrap } from 'nm/angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: '<h1>Hello {{ name }}</h1>'
})
class MyAppComponent {
constructor() {
this.name = 'World';
}
}
bootstrap(MyAppComponent);
main.js
import {MyAppComponent} from "./components/hello/hello.js";
import {HelloTemplateComponent} from "./components/helloTemplate/helloTemplate.js";
import {Component, View, bootstrap} from 'nm/angular2/angular2';
bootstrap(MyAppComponent);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<my-app></my-app>
</body>
<script src="dist/bundle.js"></script>
</html>
Run
npm install http-server -g
http-server
然后打开localhost:8080即可以看到Angular2为我们渲染的新界面。