Webpack 入门指南 - 3. Hello, Angular2!
Webpack 入门指南 - 1.安装
Webpack 入门指南 - 2.模块
这一次,我们使用 Webpack 来打包 Angular 2 的应用。
与官方的 Hello, Angular 2 项目相比,我们不使用 System.js,而是使用 TypeScript 直接编译,然后使用 Webpack 打包生成代码。
1. 下载 Angular 2 以及依赖包
修改我们的 package.json 文件,添加 Angular 2 涉及的包,和 Angular 2 所依赖的包,以后,我们可以慢慢介绍各个包的用途,这个文件也可以保存起来,以后直接使用。
{
"name": "w1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1", "angular-in-memory-web-api": "~0.1.13",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.26",
"ie-shim": "^0.1.0"
},
"devDependencies": {
"html-webpack-plugin": "^2.24.0",
"ts-loader": "^0.9.5",
"typescript": "^2.0.3",
"webpack": "^1.13.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
黄色是新添加的包,我们可以自己编辑一个应用寄宿的网页,所以,这里将自动生成网页的插件删掉了。
打开控制台窗口,执行 npm install 将这些包安装到你的本地。
2. 修改 tsconfig.json
为 TypeScript 的配置文件 tsconfig.json 再添加两行,以便支持 decorator,这是一个 JavaScript 的新特性,Angular 2 到处使用这个特性。修改之后的文件内容如下。
{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
3. 创建应用寄宿的网页
这次,我们直接编辑寄宿的网页,而不是自动生成。这是因为我们希望网页中能够添加一段为 Angular 2 应用演出的舞台。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, Angular2</title>
</head>
<body> <my-app>
Loading...
</my-app> <script src="./bundle.js"></script>
</body>
</html>
就是 my-app 标记的一段,在 Angular 2 中,我们可以自定义标记了,这个 my-app 就是我们应用以后表演的舞台了。
脚本的一段更加简单,就是直接引用我们将要生成的脚本。
4. 创建第一个 Angular 2 组件
在 Angular 2 中,UI 的基本单位称为组件 Component,一个组件映射到一个自定义的标记上,我们可以自己来定义这个标记实际的内容。
在项目的根目录下创建名为 AppComponent.ts 的文件,内容如下。
import { Component } from '@angular/core'; @Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }
@Component 就是声明说我们要定义一个组件了,selector 定义了以后我们如何来使用这个组件,我们在网页中使用的 my-app 标记就来自这里。template 就是在运行的时候,这个 my-app 实际上显示为这个模板的内容。这里就是一个一号的大标题。
5. 定义 Module
Angular 2 定义个一个模块的概念,相关的组件可以封装为一个组件,概念我们以后慢慢学,这里先来一个看看。
在项目根目录下,创建名为 app.module.ts 的文件,内容如下。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './AppComponent '; @NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
它就是将刚刚定义的 AppComponent 封装到一个 Module 中,注意其中的 bootstrap,是说通过这个组件启动的化,会从 AppComponent 开始。可以理解为第一个界面。
6. 引导应用
要想启动应用,Angular 2 提供了加载器。创建名为 app.ts 的文件,作为我们应用的启动文件。这里使用 Angular 2 提供的浏览器加载器来加载我们的启动模块。
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule( AppModule );
其实程序的基本结构就已经创建了。
但是,还有一个基本的文件需要解决。
在 Angular 2 中,底层依赖了许多基础技术,比如说 ES6 的许多技术,这些当前的 JavaScript 都不支持的,Angular 2 使用 core-js 提供了支持,另外还有 zone.js 等等库的支持。为了提前加载这些依赖库,我们需要创建一个名为 polyfills.browser.ts 的文件来加载这些库,这个文件一般都不需要经常修改。
// Polyfills import 'ie-shim'; // Internet Explorer 9 support // import 'core-js/es6';
// Added parts of es6 which are necessary for your project or your browser support requirements.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
// import 'core-js/es6/promise'; import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
最后,我们希望 Webpack 先引入这个 polyfills,然后引导 Angular 2 应用,所以,我们可以再创建一个 index.ts 来完成这个任务。内容非常简单。
import "./polyfills.browser";
import "./app";
7. 使用 Webpack 打包
最后,我们只需要告诉 webpack 从这个 index.ts 开始进行打包就可以了,webpack 可以根据这个文件中 import 导入的模块来找到其它相关的模块,直到找到所有的模块,然后进行编译,打包,最后输出到 bundle.js 就可以了。这次没有使用自动生成网页,实际上,文件更短了,
var HtmlwebpackPlugin = require('html-webpack-plugin'); module.exports = {
// 入口
entry: "./index.ts",
// 输出的文件名
output: {
filename: 'bundle.js'
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
// all files with a `.ts` extension will be handled by `ts-loader`
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
};
8. 打包和运行
如果你已经完成了前面的步骤,打开控制台创建,直接执行 webpack 命令,就会自动生成一个新的 bundle.js 文件了。
启动你的浏览器,直接打开 index.html 网页,应该就可以看到你的第一个 Angular 2 界面了。
在 Typescript 2.0 中使用 @types 类型定义
Webpack 入门指南 - 3. Hello, Angular2!的更多相关文章
- Webpack 入门指南 - 2.模块
这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...
- Webpack 入门指南 - 1.安装
Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
- 一小时包教会 —— webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- 【一小时入门】webpack 入门指南
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- webpack入门指南(基于webpack v4.41.2)
2019年12月5日初稿,目前webpack已经更新到v4.41.2,本文正是基于该版本,在windows8.1操作系统下进行的demo编译,适用于想入门webpack的前端开发人员. webpack ...
- webpack入门指南(转载)
什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...
- webpack 入门指南
很久没有更博了... 这就把最近积累用到的知识点更新到这里.. 望 共勉 什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffe ...
- webpack入门指南-step03
一.webpack 的使用 webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的. 这个配置文件主要分为三大块 entry 入口文件 让webpack用哪个文件作为项目的入口 ...
- webpack入门指南-step04
一.建立项目 建一个文件夹,然后新建一个package.json的文件在项目根目录下 如果你使用git管理你的这个项目的话,建议你新建一个.gitignore文件,不要让git提交一些node依赖的模 ...
随机推荐
- OAuth2.0授权
一.什么是OAuth2.0官方网站:http://oauth.net/ http://oauth.net/2/ 权威定义:OAuth is An open protocol to allow secu ...
- ie浏览器 jsp中链接参数为中文的处理
在js中,使用 encodeURIComponent(encodeURIComponent("警情抽查"))来处理参数,例如: mini.get("khxmdm" ...
- 利用html5的localStorage做一个备忘录
实现一个便签功能,可以记录内容和写的时间,当网页从新载入,可以读取以前的记录. html文档 <!DOCTYPE html> <html> <head lang=&quo ...
- glusterfs 内存管理方式
glusterfs中的内存管理方式: 首先来看看glusterfs的内存管理结构吧: struct mem_pool { struct list_head list; int hot_count; i ...
- NewQuant的设计(一)——整体的领域设计
NewQuant的设计思路——整体的领域分析 “领域驱动设计(DDD)”是著名软件工程建模专家Eric Evans提出的一个重要概念,是“面向对象分析设计(OOAD)”的深化.当业务逻辑变得复杂,系统 ...
- 自定义windows新建菜单
注册表下找到hkey_classes_root 找到想要新建的文件扩展名(.txt,.php,.html,.xml etc.) 创建名为ShellNew的键,再在其下添加NullType的项
- 线程安全及Python中的GIL
线程安全及Python中的GIL 本博客所有内容采用 Creative Commons Licenses 许可使用. 引用本内容时,请保留 朱涛, 出处 ,并且 非商业 . 点击 订阅 来订阅本博客. ...
- etcd第一集
网站:https://github.com/coreos/etcd 一些观点:https://yq.aliyun.com/articles/11035 1.etcd是键值存储仓库,配置共享和服务发现2 ...
- OSX unable to write 'random state'
openssl ca -gencrl -config ./config/openssl.cnf -out ./CA/crl/cacrl.pem -passin pass:'password' unab ...
- tomcat集群
apache整合tomcat部署集群 http://www.cnblogs.com/God-froest/p/apache_tomcat.html 今天看到"基于apache的tomcat负 ...