详解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 相关文章推荐
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
JS实现音乐导航特效
Jan 06 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
python装饰器练习题及答案
2019/11/01 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML5通用接口详解
2016/06/12 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
Linux的文件类型
2016/07/05 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
生日庆典策划方案
2014/06/02 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
社团活动总结格式
2014/08/29 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript