该系列用于探索一些 Angular 中灵活或者新的用法。本文记录用 webpack 配置环境，启动 app 的过程。
# 基本依赖
其实 angular2 快速启动的脚手架也不少，官方的angular-cli (opens new window)，Angular2 Webpack Starter (opens new window)等等。
这里选择自己搭建的原因，大概是脚手架什么的生成最后的项目总有一些不需要的，还有像单元测试和 e2e 等等基本不会用到的。
本骚年更偏向的是，一点一点地搭建起来，缺了就慢慢补，这样里面的每个东西都是自己很清楚的。
# package.json
首先，当然要介绍下我们的一些基本依赖，一般都会选择从 package.json 开始。
{
"name": "angular-free",
"version": "0.0.0",
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpackServer.config.js --host 0.0.0.0 --port 3333 --devtool eval --progress --colors --hot --content-base dist"
},
"dependencies": {
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.10"
},
"devDependencies": {
"@types/node": "^7.0.18",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-latest": "^6.24.1",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"ts-loader": "^2.0.3",
"tslint": "^5.2.0",
"typescript": "~2.2.0",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
}
}
这里可以大概看到，除了基本的 angularv4.0+（这里本骚年安装的是 v4.1.2 版本），我们还用到了其他的一些工具或者库，像：
- webpack
- babel
- typescript
- ...
本节我们主要涉及的是 webpack。
webpack 依赖安装，除了npm install外，还需要全局安装npm install -g webpack。
webpack 本骚年使用的是 v2.0+版本，而 1 迁 2 其实也不是什么难事情，官方有个很详细的migration 说明 (opens new window)，大家可以参考看看。
script命令
至于 scripts 命令，这里有两个：
npm run dev：启动 webpack 服务。npm run build: 构建生成 dist 目录。
# webpack 配置
# webpack.config.js
这里简单介绍一下几个使用到的 loader。
- babel-loader：将 ES6 甚至 ES7 编译成 ES5
- css/style-loader：基本的样式文件编译打包
- ts-loader：将 ts 编译成 js。
- file-loader：这里主要是方便 angular 组件声明
templateUrl等一些文件路径的时候比较方便。
关于插件 plugins，这里主要用了一个html-webpack-plugin，用于插入index.html页面。
上码：
var webpack = require("webpack");
var path = require("path");
var HtmlwebpackPlugin = require("html-webpack-plugin");
var config = {
// 入口
entry: ["babel-polyfill", "./src/bootstrap.ts"],
// 生成的文件
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
// 文件后缀
resolve: {
extensions: [".ts", ".js"]
},
module: {
// babel
rules: [
{
test: /\.ts$/,
use: ["babel-loader", "ts-loader"],
exclude: /node_modules/
},
{
test: /\.css$/, // Only .css files
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
// plugins
new HtmlwebpackPlugin({
template: path.resolve(__dirname, "src/index.html"),
inject: "body"
})
],
devtool: "source-map"
};
module.exports = config;
其中主要涉及的文件生成：
- bundle.js: 为主要代码的编译打包
之前在《玩转 angular1》系列 (opens new window)中讲过一种将依赖单独打包成 vendors.js，而将项目代码打包成 bundle.js，这样的方式使用场景不一样，大家需要也可以去看看。
# webpackServer.config.js
var webpack = require("webpack");
var path = require("path");
var config = require("./webpack.config.js");
config.entry.concat([
"webpack/hot/dev-server",
"webpack-dev-server/client?http://localhost:3333"
]);
module.exports = config;
# 其他配置
# .babelrc
babel-loader 的配置通常使用.babelrc 文件进行配置：
{
"presets": [
"latest",
{
"ignore": ["./node_modules"]
}
],
"plugins": []
}
至于presets参数，我们直接上最新的特性就好啦。当然小伙伴们也可以根据自己的喜好配置像"es-2015"、"stage-0"等阶段，当然需要安装相应的 babel 依赖啦。
更多的 babel 解读可参考阮一峰的《Babel 入门教程》 (opens new window)。
# tsconfig.json
直接上 json：
{
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"noImplicitAny": false,
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"importHelpers": true,
"noEmitHelpers": true,
"pretty": true,
"strictNullChecks": false,
"experimentalDecorators": true,
"lib": ["dom", "es7", "es6"]
},
"exclude": ["node_modules", "src/assets", "dist"]
}
# 启动应用
# 项目代码
关于代码其实很简单，从 angular-cli 里偷过来一个app-root的模块组件，然后拼到项目里，最终长这么一个样：
打包之后生成的 dist 目录长这样：
其实这里大家可以看到这样使用 file-loader 的话，对应的文件并不会一起打包进去 bundle.js 文件里，这样有好处也有不好的地方。
# 结束语
这节主要讲了 webpack/babel/Typescript 一些相关配置，项目其实已经搭建起来了，但是目前看来并不是特别完善，后面我们可以做些改善和调整。
此处查看项目代码 (opens new window)
此处查看页面效果 (opens new window)
