webpack+angular2开发环境搭建

时间:2022-09-06 14:21:54

升级版之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开发环境搭建的更多相关文章

  1. windows下vue&plus;webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  2. Windows 环境下vue&plus;webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  3. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

  4. React&plus;Webpack&plus;Webstorm开发环境搭建

    需要安装的软件 node.js npm包管理 Webstorm 由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm nodejs(包含npm)安装在默认路径C:\Program Fi ...

  5. TypeScript &plus; Webpack 4 开发环境搭建&lpar;转&rpar;

    前段时间接触到 Microsoft 的 Microsoft.AspNetCore.SpaTemplates 模板,生成的项目使用的默认语言是 TypeScript,虽然以前在此之前并没有用过TypeS ...

  6. SpringBoot&plus;Angular2 开发环境搭建

    https://segmentfault.com/a/1190000007921675

  7. angular2最详细的开发环境搭建过程

    本文所需要的源代码,从 http://files.cnblogs.com/files/lingzhihua/angular2-quickstart.rar 下载 angular官方推荐使用quicks ...

  8. ES6的开发环境搭建

    在搭建es6开发环境之前,先简单介绍一下es6. ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得 Java ...

  9. windows下vue&period;js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

随机推荐

  1. 一起学微软Power BI系列-使用技巧&lpar;5&rpar;自定义PowerBI时间日期表

    1.日期函数表作用 经常使用Excel或者PowerBI,Power Pivot做报表,时间日期是一个重要的纬度,加上做一些钻取,时间日期函数表不可避免.所以今天就给大家分享一个自定义的做日期表的方法 ...

  2. JavaScript执行环境

    执行环境(Execution Context,也称为"执行上下文")是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其它数据,决定了各自的行为.当Ja ...

  3. ios基础篇(十四)——UITableView(二)属性及基本用法

    上一篇说了UITableView的重用机制,让我们对UITableView有了简单了解,下面说说UITableView的属性及常见方法. 一.属性 1.frame:设置控件的尺寸和大小 2.backg ...

  4. UserDefault 用户首选项读写 swift

    // // ViewController.swift // 首选项数据读写 // // Created by mac on 15/7/12. // Copyright (c) 2015年 fangyu ...

  5. &lbrack;Linux 使用&lpar;2&rpar;&rsqb; 64位Linux下安装jboss-as-7&period;1 以及jdk1&period;7

    一.软件的下载 jdk下载地址:    http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.h ...

  6. java调优(一)

  7. NOIP2017总结

    NOIP2017 总结 今年又炸飞天了,day1T1T2加起来不到100分,T3只有10分--怕真的要AFO了. 和去年一模一样day1炸飞天,day2虽然发挥正常但也无力回天 day1 Day1T1 ...

  8. Linux文件编辑命令详细整理

    刚接触Linux,前几天申请了个免费体验的阿里云服务器,选择的是Ubuntu系统,配置jdk环境变量的时候需要编辑文件. vi命令编辑文件,百度了一下,很多回答不是很全面,因此编辑文件话了一些时间. ...

  9. mac搭建简单的hls推流服务器遇到的问题&lpar;待更新&rpar;

    实际操作步骤: 输入brew install nginx-full --with-rtmp-module命令出现以下报错: 需要先安装nginx服务器,运行命令brew tap homebrew/ng ...

  10. Cocos Creator(圆形遮罩头像)动态增加遮盖层 mask 并设为圆形生效

    var avatar = new cc.Node('avatar'); var sp = node.addComponent(cc.Sprite); sp.spriteFrame = new cc.S ...