基于webpack的angluar2项目搭建

来源：互联网发布：淘宝联盟高佣金通过编辑：程序博客网时间：2024/06/10 19:09

前端领域里，目前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';//引入我们刚才创建的第一个componentimport { AppComponent }  from './app.component';//声明一个应用模块@NgModule({    imports:      [ BrowserModule ],    declarations: [ AppComponent ,MyRouterComponent],    bootstrap:    [ AppComponent ],})export class AppModule{    constructor(){}}//启动应用platformBrowserDynamic().bootstrapModule(AppModule);

文件都准备好了 npm start 然后 npm run server
输入地址localhost:8080
搞定

阅读全文

0 0