该系列用于探索一些 Angular 中灵活或者新的用法。本文记录用 webpack 配置环境,启动 app 的过程。

基本依赖

其实 angular2 快速启动的脚手架也不少,官方的angular-cliAngular2 Webpack Starter等等。

这里选择自己搭建的原因,大概是脚手架什么的生成最后的项目总有一些不需要的,还有像单元测试和 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 说明,大家可以参考看看。

  • script命令

至于 scripts 命令,这里有两个:

  1. npm run dev:启动 webpack 服务。
  2. 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》系列中讲过一种将依赖单独打包成 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 入门教程》

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的模块组件,然后拼到项目里,最终长这么一个样:

image

打包之后生成的 dist 目录长这样:

image

其实这里大家可以看到这样使用 file-loader 的话,对应的文件并不会一起打包进去 bundle.js 文件里,这样有好处也有不好的地方。

结束语

这节主要讲了 webpack/babel/Typescript 一些相关配置,项目其实已经搭建起来了,但是目前看来并不是特别完善,后面我们可以做些改善和调整。
此处查看项目代码
此处查看页面效果

部分文章中使用了一些网站的截图,如果涉及侵权,请告诉我删一下谢谢~
温馨提示喵