基于webpack的angluar2项目搭建

最新推荐文章于 2024-04-26 16:15:50 发布

hcjlwn

最新推荐文章于 2024-04-26 16:15:50 发布

阅读量595

点赞数

分类专栏： angular2 文章标签： angular2 webpack

本文链接：https://blog.csdn.net/hcjlwn/article/details/77427814

版权

angular2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端领域里，目前angular2非常火，很多大公司已经已经把框架迁移到angular2上了，尽管官网的快速起步中已经有一套现成的框架，这套框架作为练手是完全没有问题的，但真正在开发中，并不够用。得自己搭建。

开发环境

node：6.9.1 +，

npm：3.10.8 +，

IDE：WebStorm

package.json

{
  "name": "angular2",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack",
    "server": "webpack-dev-server --inline --hot"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/compiler-cli": "^4.3.5",
    "@angular/core": "^2.4.10",
    "@angular/forms": "^2.4.5",
    "@angular/platform-browser": "^2.4.10",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/router": "^3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.4.2",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "^1.3.1",
    "@types/core-js": "^0.9.35",
    "ts-loader": "^2.0.0",
    "typescript": "^2.4.0",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.7.1"
  }
}

配好package.json之后直接npm install 时间可能久一点，耐心等待下
package.json文件需要注意”typescript”: “^2.4.0”这个依赖，如果你用其他版本的，要注意跟rxjs的版本匹配，要不然会报错。
大概介绍一下依赖的意思：
1 “@angular/platform-browser-dynamic”: “^2.4.5“：为应用程序提供一些提供商和 bootstrap 方法，以便在客户端编译模板。不要用于离线编译。我们使用这个包在开发期间引导应用，以及引导 plunker 中的范例。
2 “@angular/platform-browser”: “^2.4.10”：与 DOM 和浏览器相关的每样东西，特别是帮助往 DOM 中渲染的那部分。这个包还包含 bootstrapStatic 方法，用来引导那些在产品构建时需要离线预编译模板的应用程序。
3 “rxjs”: “5.4.2”：可观察对象 (Observable) 规范提供的填充库

新建文件webpack.config.js


module.exports = {
    entry: __dirname+ '/main.ts' ,//入口
    output: {
        path: __dirname+ '/dist',
        filename: 'bundle.js'
    },//打包后文件的路径
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader']
            }
        ],
        exprContextCritical: false //去除警告
    },
    devServer:{
        contentBase:'./dist',
        inline:true,
        hot:true
    }//热更新和提供服务

};

新建文件tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports":true,
    "sourceMap":true,
    "declaration":false,
    "lib":["es2015","dom"],
    "outDir":"./aot",
    "typeRoots":["./node_modules/@types"]

  },

  "exclude": [
    "node_modules",
    "dist"
  ]
}

新建文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>environment</title>
</head>
<body>
<!--这里引用我们的第一个component-->
<my-app></my-app>
<!--加载使用webpack编译后的bundle-->
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>

新建app文件夹新建文件app.component

import {Component} from '@angular/core';

//声明第一个Component
@Component({
    selector: 'my-app',
    template: `<h1>anular2</h1>`
})
export class AppComponent { }

在app文件夹新建文件app.module

import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

//引入NgModule装饰器
import { NgModule }      from '@angular/core';
import { RouterModule } from '@angular/router';

//引入浏览器模块
import { BrowserModule } from '@angular/platform-browser';

//引入启动器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

//引入我们刚才创建的第一个component
import { AppComponent }  from './app.component';

//声明一个应用模块
@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent ,MyRouterComponent],
    bootstrap:    [ AppComponent ],
})
export class AppModule{
    constructor(){}
}

//启动应用
platformBrowserDynamic().bootstrapModule(AppModule);