脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → webpack搭建angular2

详解webpack+angular2开发环境搭建

 更新时间：2017年06月28日 11:21:05   作者：追逐前沿的攻城狮  
这篇文章主要介绍了详解webpack+angular2开发环境搭建，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

刚搭建完一个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"]
  }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解Angular的8个主要构造块

    详解Angular的8个主要构造块

    Angular 主要分为八大构造块（也就是八个核心概念）：模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下
    2017-06-06
  • 利用Angular.js编写公共提示模块的方法教程

    利用Angular.js编写公共提示模块的方法教程

    最近工作中会经常遇到一些公用提示，使用框架自带很多时候不方便所以便自己编写了一个公共提示模块，下面这篇文章主要介绍了利用Angular.js编写公共提示模块的方法教程，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-05-05
  • AngularJS实现一次监听多个值发生的变化

    AngularJS实现一次监听多个值发生的变化

    这文章给大家介绍了如何利用AngularJS一次监听多个值发生的变化，文中通过示例代码演示，这样更方便大家理解学习，有需要的可以参考借鉴。
    2016-08-08
  • AngularJS自定义指令之复制指令实现方法

    AngularJS自定义指令之复制指令实现方法

    这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • 使用Angular CLI进行单元测试和E2E测试的方法

    使用Angular CLI进行单元测试和E2E测试的方法

    这篇文章主要介绍了使用Angular CLI进行单元测试和E2E测试的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Angular的$http与$location

    Angular的$http与$location

    这篇文章主要为大家详细介绍了Angular的$http与$location，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • AngularJS 中的事件详解

    AngularJS 中的事件详解

    本文主要介绍AngularJS 事件,这里整理了相关资料,比较详细的介绍了AngularJS的使用方法,有需要的小伙伴参考下
    2016-07-07
  • 详解Angular之路由基础

    详解Angular之路由基础

    单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。
    2021-05-05
  • AngularJS中update两次出现$promise属性无法识别的解决方法

    AngularJS中update两次出现$promise属性无法识别的解决方法

    最近在工作中用AngularJS中update了两次之后发现$promise属性无法识别了，后来通过查找相关的资料终于解决了，想着记录下方便自己或者有需要的朋友，所以本文主要介绍了AngularJS中update两次出现了$promise属性无法识别的解决方法,需要的朋友可以参考借鉴。
    2017-01-01
  • 详解Angular 中 ngOnInit 和 constructor 使用场景

    详解Angular 中 ngOnInit 和 constructor 使用场景

    最初学习Angular的时候总是搞不清楚ngOnInit和constructor的区别，现在我们来稍微理一下两者之间的区别。
    2017-06-06

最新评论