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的学习行列中 ...
随机推荐
- C++中的const的用法
const对象.指向const对象的指针.const指针(通过一个面试题来了解) 1.const对象 (1)关于const,很多企业的笔试.面试都会出现,很简单,就问你“const的含义?”. 我 ...
- 170713、springboot编程之多数据源切换
我们在开发过程中可能需要用到多个数据源,我们有一个项目(MySQL)就是和别的项目(SQL Server)混合使用了.其中SQL Server是别的公司开发的,有些基本数据需要从他们平台进行调取,那么 ...
- 《Git权威指南》读书笔记
这本书一直在拿SVN和CVS 与Git进行对比.对于有过SVN和CVS经验的开发者来讲,这种方法很好,能够通过对比去了解各种的优缺点,从而更快地掌握Git的使用方法,更加欣赏Git.而对于刚刚接触源码 ...
- No module named pip.req
https://stackoverflow.com/questions/25192794/no-module-named-pip-req#
- CRM - 销售与客户
一.销售与客户 - 表结构 ---公共客户(公共资源) 1.没有报名 2.3天没有跟进 3.15天没有成单 客户分布表 龙泰 男 yuan 2018-5-1 3天未跟进 龙泰 男 三江 2018-5- ...
- python采用pika库使用rabbitmq总结，多篇笔记和示例（转）
add by zhj:作者的几篇文章参考了Rabbitmq的Tutorials中的几篇文章. 原文:http://www.01happy.com/python-pika-rabbitmq-summar ...
- hdu 5056 Boring count (窗体滑动）
You are given a string S consisting of lowercase letters, and your task is counting the number of su ...
- IDEA安装以及项目初始化
首先安装idea: 如果15.0版本安装不上就安装16.0: 点击安装文件以后,一直点下一步就可以了. 安装完成后设置: 如果没有的话,需要点击SDKs,点击+,然后选择电脑上安装的JDK. 接下来创 ...
- Django REST framework 之 API认证
RESTful API 认证 和 Web 应用不同,RESTful APIs 通常是无状态的, 也就意味着不应使用 sessions 或 cookies, 因此每个请求应附带某种授权凭证,因为用户授权 ...
- 通过IP地址和子网掩码与运算计算相关地址
通过IP地址和子网掩码与运算计算相关地址 知道IP地址和子网掩码后可以算出 网络地址 广播地址 地址范围 本网有几台主机 例一:下面例子IP地址为192.168.100.5 子网掩码是255.255. ...