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开发环境搭建的更多相关文章
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- webpack前端开发环境搭建
要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...
- React+Webpack+Webstorm开发环境搭建
需要安装的软件 node.js npm包管理 Webstorm 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm nodejs(包含npm)安装在默认路径C:\Program Fi ...
- TypeScript + Webpack 4 开发环境搭建(转)
前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板,生成的项目使用的默认语言是 TypeScript,虽然以前在此之前并没有用过TypeS ...
- SpringBoot+Angular2 开发环境搭建
https://segmentfault.com/a/1190000007921675
- angular2最详细的开发环境搭建过程
本文所需要的源代码,从 http://files.cnblogs.com/files/lingzhihua/angular2-quickstart.rar 下载 angular官方推荐使用quicks ...
- ES6的开发环境搭建
在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
随机推荐
- postgresql----Btree索引
当表数据量越来越大时查询速度会下降,像课本目录一样,在表的条件字段上创建索引,查询时能够快速定位感兴趣的数据所在的位置.索引的好处主要有加速带条件的查询,删除,更新,加速JOIN操作,加速外键约束更新 ...
- 170721、springboot编程之注解(annotation)列表
(1)@SpringBootApplication 申明让spring boot自动给程序进行必要的配置,这个配置等同于: @Configuration ,@EnableAutoConfigurati ...
- Linux服务器报错too many open files错误解决方案
1.本质解决方案按照oracle的安装脚本中以下几项文件进行相应配置: cp /etc/security/limits.conf /etc/security/limits.conf.bak echo ...
- php array_merge和运算符+
其实很多时候我都很疑惑为什么同维度的数组不能直接使用运算+直接进行相加,然后结果就是两个数组合并的在一起的新结果,这个就有点跟array_merge合并函数类似了,接下来就来看下这两种合并的方式到底有 ...
- rbac - 初识
一.rbac 权限组件 1 项目与应用 一个项目,可以有多个应用 一个应用,可以在多个项目下 前提:应用是组件!! 2 什么是权限? 一个包含正则表达式url就是一个权限 who what how - ...
- uchome 缓存生成
一.uchome的缓存目录 ---------data此目录要有777权限 (1)模板文件缓存机制 1:在要显示的页面通过include template($name) 语句来包含被编译后的模板文件 ...
- 【loadrunner】【scorm学习】demo/test域上进行scorm脚本录制及回放成功脚本备份
vuser_init() { //web_set_sockets_option('SSL_VERSION','TLS'); lr_start_transaction("login" ...
- Java Thread 如何处理未捕获的异常？
Java Thread是不允许异常抛出到本线程之外的,Runnable接口的public abstract void run()是不允许throws Exception的,这在编译时就通不过. 线程异 ...
- [Axiom 3D]3.SceneManager场景管理器
首先看看Axiom.Core命名空间下public abstract class SceneManager : DisposableObject A SceneManager organizes th ...
- Django Rest Framework(2)-----序列化详解(serializers)
REST framework中的序列化类与Django的Form和ModelForm类非常相似.我们提供了一个Serializer类,它提供了一种强大的通用方法来控制响应的输出,以及一个ModelSe ...