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的学习行列中 ...
随机推荐
- List<Map<String, Object>> 与 json 互转
近期做指纹识别,需要用到缓存文件,数据量并不大,用redis不合适,所以用到了txt文件. 思路是 1.定时查询指纹,存到txt缓存文件中. 2.新增或删除指纹时,查询指纹,存到txt缓存文 ...
- Log4Net的简单使用
在前面的随笔中,已经异常处理过滤器中,我们已经将获取到的错误信息写到队列中去,然后又单独的线程对队列中的错误信息处理,将错误信息输出到制定的文件中,但是如果我们需要改变需求,打算将错误信息输出到数据库 ...
- 解决“The remote certificate is invalid according to the validation procedure”问题
在用HttpClient发起https请求时,遭遇了“The remote certificate is invalid according to the validation procedure”异 ...
- rbac - 初识
一.rbac 权限组件 1 项目与应用 一个项目,可以有多个应用 一个应用,可以在多个项目下 前提:应用是组件!! 2 什么是权限? 一个包含正则表达式url就是一个权限 who what how - ...
- 20144306《网络对抗》MAL_后门原理与实践
本期收获 1.了解后门的基本概念. 2.Netcat.socat.MSF meterpreter的使用(MSF meterpreter实在太好玩了) 3.后门软件的启动方式: Windows任务计划程 ...
- 洛谷P5151 HKE与他的小朋友 快速幂/图论+倍增
正解:矩阵快速幂/tarjan+倍增 解题报告: 传送门! 跟着神仙做神仙题系列III 这题首先一看到就会想到快速幂趴?就会jio得,哦也不是很难哦 然而,看下数据范围,,,1×105,,,显然开不下 ...
- uchome 常用函数示例
一.inserttable //添加数据 //前3个参数 $tablename插入的表名称 $insertsqlarr数据数组 $returnid是否返回插入ID function inserttab ...
- SQL Server查看库、表占用空间大小
转自:https://blog.csdn.net/yenange/article/details/50493580 查询数据文件与日志文件占用情况,查看数据大小,查看库大小 1. 查看数据文件占用(权 ...
- （2.2）DDL增强功能-自定义函数与存储过程
1.存储过程 精华总结: 通过对比@@ERROR一般和if判断结合使用,@@TRANCOUNT和try catch块结合使用,xact_abort为on可以单独使用Xact_abort为off时,如果 ...
- 004-ant design -dispatch、request、fetch
一.dispatch 函数 typedispatch = (a: Action) => Action dispatching function 是一个用于触发 action 的函数,action ...