因为项目原因又玩上了Angular2(v4.0+)，《玩转Angular2》系列用于探索一些灵活或者新的用法。
本文记录用webpack配置环境，启动app的过程。
基本依赖
其实angular2快速启动的脚手架也不少，官方的angular-cli，Angular2 Webpack Starter等等。
这里选择自己搭建的原因，大概是脚手架什么的生成最后的项目总有一些不需要的，还有像单元测试和e2e等等基本不会用到的。
本骚年更偏向的是，一点一点地搭建起来，缺了就慢慢补，这样里面的每个东西都是自己很清楚的。
package.json
首先，当然要介绍下我们的一些基本依赖，一般都会选择从package.json开始。
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
30
31
32
33
34
35
| {
"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说明，大家可以参考看看。
至于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页面。
上码：
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
30
31
32
33
34
35
36
37
38
39
40
| 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: {
rules: [
{
test: /\.ts$/,
use: ["babel-loader", "ts-loader"],
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}]
},
plugins: [
new HtmlwebpackPlugin({
template: path.resolve(__dirname, 'src/index.html'),
inject: 'body'
})
],
devtool: 'source-map'
};
module.exports = config;
|
其中主要涉及的文件生成：
之前在《玩转angular1》系列中讲过一种将依赖单独打包成vendors.js，而将项目代码打包成bundle.js，这样的方式使用场景不一样，大家需要也可以去看看。
webpackServer.config.js
1
2
3
4
5
6
7
| 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文件进行配置：
1
2
3
4
5
6
7
8
| {
"presets": [
"latest", {
"ignore": ["./node_modules"]
}
],
"plugins": []
}
|
至于presets参数，我们直接上最新的特性就好啦。当然小伙伴们也可以根据自己的喜好配置像”es-2015”、”stage-0”等阶段，当然需要安装相应的babel依赖啦。
更多的babel解读可参考阮一峰的《Babel入门教程》。
tsconfig.json
直接上json：
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
| {
"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一些相关配置，项目其实已经搭建起来了，但是目前看来并不是特别完善，后面我们可以做些改善和调整。
此处查看项目代码
此处查看页面效果
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢
