详解webpack+angular2开发环境搭建


Posted in Javascript onJune 28, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 页面计时器示例代码
Oct 28 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
node.js的事件机制
Feb 08 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 #Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 #Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 #Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 #Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 #Javascript
微信小程序后台解密用户数据实例详解
Jun 28 #Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 #Javascript
You might like
php轻松实现中英文混排字符串截取
2014/05/28 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
vue v-model动态生成详解
2018/06/30 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
python中的yield使用方法
2014/02/11 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python生成验证码图片代码分享
2016/01/28 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python os.fork() 循环输出方法
2019/08/08 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
static关键字的用法
2013/10/07 面试题
什么是命名空间(NameSpace)
2015/11/24 面试题
自荐信包含哪些内容
2013/10/30 职场文书
酒店应聘自荐信
2013/11/09 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
中年人生感言
2014/02/04 职场文书
《画风》教学反思
2014/04/16 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
2016入党心得体会范文
2016/01/06 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电