详解webpack+angular2开发环境搭建
时间:2019-03-30
本文章向大家介绍详解webpack+angular2开发环境搭建,主要包括详解webpack+angular2开发环境搭建使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
刚搭建完一个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"] } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- shell的图形化实现简单示例(r3笔记第70天)
- 关于查询转换的一些简单分析(三) (r3笔记第69天)
- 【大牛经验】Web服务器的工作原理
- 使用shell定制addm脚本(r3笔记第88天)
- 【专业技术第十三讲】指针和内存泄露
- 【Java案例】余弦函数
- MySQL数据类型(r3笔记第87天)
- NLP真实项目:利用这个模型能够通过商品评论去预测一个商品的销量
- python + selenium + PhantomJS 获取腾讯应用宝APP评论
- 简单实用的sql小技巧(第二篇)(r3笔记第86天)
- Java代码效率优化【面试+提高】
- 利用逻辑回归模型判断用户提问意图
- 关于reset sequence(r3笔记第85天)
- 【编程基础第十二讲】web开发编程基础--回调函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法