詳解webpack+angular2開發(fā)環(huán)境搭建

更新時間：2017年06月28日 11:21:05 作者：追逐前沿的攻城獅

這篇文章主要介紹了詳解webpack+angular2開發(fā)環(huán)境搭建，具有一定的參考價值，感興趣的小伙伴們可以參考一下

剛搭建完一個webpack+angular2環(huán)境，由于angular及webpack官網(wǎng)上沒有一個折中的搭建方案，所以只能摸索著搭建，中間遇到一些坑，遂總結(jié)記錄下來，以供交流。

搭建完后的項目初步環(huán)境如下：

app
----app.component.ts
----app.module.ts
----main.ts
index.html
package.json
tsconfig.json
webpack.config.js

app.componnet.ts：組件文件。angular2應(yīng)用是由組件構(gòu)成，組件控制視圖；

import { Component } from '@angular/core';
@Component({
 selector: 'my-app',
 template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero}}</h2>
  `
})
// 使用變量初始化方式
export class AppComponent {
 title = 'Tour of Heroes';
 myHero = 'Windstorm';
}

app.module.ts：應(yīng)用跟模塊。angular是模塊化，擁有自己的模塊系統(tǒng)，被稱為angular模塊或NgModules（深入了解）；//缺少下述模塊引入，會輸出"Uncaught reflect-metadata shim is required when using class decorators"的錯誤

import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
//引入NgModule裝飾器
import { NgModule }   from '@angular/core';
//引入瀏覽器模塊
import { BrowserModule } from '@angular/platform-browser';
//引入創(chuàng)建的component
import { AppComponent } from './app.component';


@NgModule({
 imports:   [ BrowserModule ],
 declarations: [ AppComponent ],
 bootstrap:  [ AppComponent ]
})
export class AppModule { }

main.ts：用于引導(dǎo)跟模塊啟動應(yīng)用；

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule }       from './app.module';
 //引導(dǎo)跟模塊啟動應(yīng)用
platformBrowserDynamic().bootstrapModule(AppModule);

index.html：angular應(yīng)用宿主頁面；
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>small胖的博客</title>
</head>
<body>
  <my-app></my-app>
  <script src="dist/bundle.js"></script>
</body>
</html>

package.json：一個標(biāo)準(zhǔn)化的npm說明文件，其中包含諸如當(dāng)前應(yīng)用的依賴包、自定義的腳本命令等，在cmd終端可用npm init自動創(chuàng)建該文件；

注意，此處如果引入的angular模塊版本是2.4.X，則會報錯“Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators”，產(chǎn)生此坑的具體原因尚不清楚，希望有朋友一起交流。

{
 "name": "blogcode",
 "version": "1.0.0",
 "description": "",
 "main": "webpack.config.js",
 "dependencies": {
  "ts-loader": "2.0.0",
  "@angular/common": "2.1.2",
  "@angular/compiler": "2.1.2",
  "@angular/core": "2.1.2",
  "@angular/platform-browser": "2.1.2",
  "@angular/platform-browser-dynamic":"2.1.2",
  "rxjs": "5.0.0-beta.12",
  "zone.js": "0.6.26",
  "core-js": "^2.4.1"
 },
 "devDependencies": {
  "webpack": "^2.2.1",
  "@types/core-js": "^0.9.35",
  "typescript": "^2.1.5",
  "webpack": "^2.2.0",
  "webpack-dev-server": "^2.3.0"
 },
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "repository": {
  "type": "git",
  "url": "https://git.coding.net/frankshin/xudengwei.git"
 },
 "author": "",
 "license": "ISC"
}

tsconfig.json：用于定義typescript編譯成ES5的各項參數(shù)；

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "declaration": false
  },
  "buildOnSave": false,
  "compileOnSave": false,
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js：一個標(biāo)準(zhǔn)化的commonjs文件，用于配置webpack編譯打包的參數(shù)。

module.exports = {
  entry: "./app/main.ts",
  output: {
    path: __dirname + '/dist',
    filename: "bundle.js"
  },
  module: {
  rules: [
    {
     test: /\.tsx?$/,
     loader: 'ts-loader',
     exclude: /node_modules/,
    },
  ]
  },
  resolve: {
   extensions: [".tsx", ".ts", ".js"]
  }
};

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: