webpack+angular2开发环境搭建

升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html

刚搭建完一个webpack+angular2环境，由于angular及webpack官网上没有一个折中的搭建方案，所以只能摸索着搭建，中间遇到一些坑，遂总结记录下来，以供交流。

搭建完后的项目初步环境如下：

app

----app.component.ts

----app.module.ts

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

app.componnet.ts：组件文件。angular2应用是由组件构成，组件控制视图；

 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：应用跟模块。angular是模块化，拥有自己的模块系统，被称为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';

 //引入创建的component

 import { AppComponent }  from './app.component';

 @NgModule({

   imports:      [ BrowserModule ],

   declarations: [ AppComponent ],

   bootstrap:    [ AppComponent ]

 })

 export class AppModule { }

main.ts：用于引导跟模块启动应用；

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 import { AppModule }              from './app.module';

 //引导跟模块启动应用

 platformBrowserDynamic().bootstrapModule(AppModule);

index.html：angular应用宿主页面；

 <!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：一个标准化的npm说明文件，其中包含诸如当前应用的依赖包、自定义的脚本命令等，在cmd终端可用npm init自动创建该文件；

注意，此处如果引入的angular模块版本是2.4.X，则会报错“Angular2 + Jspm.io : reflect-metadata shim is required when using class decorators”，产生此坑的具体原因尚不清楚，希望有朋友一起交流。

 {

   "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的各项参数；

 {

     "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：一个标准化的commonjs文件，用于配置webpack编译打包的参数。

 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"]

    }

 };

巴特西

webpack+angular2开发环境搭建

最新文章

热门文章