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的学习行列中 ...
随机推荐
- vue 学习报错 Newline required at end of file but not found
着不敢了,原因竟然是需要在js css等后面再加一行(空行) Newline required at end of file but not found 翻译:文件末尾需要换行符,但找不到 如下面两处 ...
- SQL的子查询操作
对于表中的每一个记录,我们有时候需要提取特殊的或者你需要的记录,要提前做一个表的筛选,之后再对你选出的记录做一个修改,此时你必须使用SQL的子查询操作.如:修改id=5的记录的strContent字段 ...
- android中的验证码倒计时
1.如图所示,要实现一个验证码的倒计时的效果 2.实现 图中获取验证码那块是一个button按钮 关键部分,声明一个TimeCount,继承自C ...
- Java中参数传递时值传递的机制分析
参数传递是什么? 在C的函数或是JAVA的方法中,向一个函数或方法内部传递一个参数,比如: void fun( int num ){ num+=2 ; } int a = 3 ...
- top与with ties用法
使用top中把与最后一条记录值相同的数据也放入列表中 一.SQL SERVER中使用WITH TIES的用途 with ties一般是和Top , order by相结合使用的,会查询出最后一条数据额 ...
- SaltStack系列（四）之实例编写
前面已经介绍的够多了,这里来让我们写一些完整的实例来梳理一下. 强调一下,sls文件的抒写格式都是"-"后面跟一个空格,然后后面跟参数: 然后后面再跟一个空格,然后是要填写的值.但 ...
- PAT 1055 The World's Richest[排序][如何不超时]
1055 The World's Richest(25 分) Forbes magazine publishes every year its list of billionaires based o ...
- python学习之路-day8
一.接口与归一化设计 1.什么是接口 调用某个功能的方法/方式/入口 2.为什么要用接口 接口提取了一群类共同的函数,可以把接口当做一个函数的集合. 然后让子类去实现接口中的函数. 这么做的意义在于归 ...
- EditPlus 4.3.2463 中文版已经发布（10月16日更新）
距离上个版本在本年5月发布后,EditPlus 网站沉寂多月.日前终于发布了一个新的小版本. 该版本却具有多项改进,值得一提: * Ctrl+Alt+Up/Down 键在列选模式下可插入多个插入点. ...
- Openresty学习汇总
在锤子科技发布会上,提到给Openresty的捐赠的事情,出于好奇我在是网上查询了Openresty,看到了Openresty的官网(http://openresty.org/en/).看到介绍说的很 ...