使用React框架
React语法特征
有jsx和class语法 jsx语法无法在现有的任何js引擎中运行，所以构建的时候需要将源码转化成可以运行的代码
// 源jsx语法
return <h1>Hello, Webpack</h1>
// 被转换成正常的js代码
return React.creatElement('h1', null, 'Hello, Webpack')
目前，Babel和TypeScript都提供了对React语法的支持，下面分别介绍如何在Babel和TypeScript项目中接入React框架
React与Babel
在Babel项目中接入React框架，只需要再React所依赖的Presets babel-preset-react 1、安装依赖
# 安装React基础依赖
npm i -D react react-dom
# 安装Babel完成语法转换所需的依赖
npm i -D babel-preset-react
2、修改.babelrc配置文件，加入React Presets：
"presets": [
"react"
]
如上就完成了准备工作 3、修改main.js文件
import * as React from 'react';
import { Component } from 'react';
import { render } from 'react-dom';
class Button extends Component {
rebder() {
return <h1>Hello, Webpack</h1>
}
}
render(<Button />, window.document.getElementById('app'));
React与TypeScript
与Babel相比，TypeScript原生支持jsx语法，不需要安装新的依赖，只需要修改一行配置，但是TypeScript的不同之处在于：
- 使用了jsx语法的文件后缀必须是tsx；
- 由于React不是采用TypeScript编写，所以需要安装react和react-dom对应的TypeScript接口描述模块
@types/react和@types/react-dom才能通过编译
为TypeScript项目接入React框架 1、修改TypeScript编译器的配置文件tsconfig.json，增加对jsx语法支持
{
"compilerOptions": {
"jsx": "react" // 开启JSX，支持React
}
}
2、修改文件扩展名 因为main.js文件存在jsx语法，则重命名为main.tsx 3、修改文件内容和如上的Babel一样
import * as React from 'react';
import { Component } from 'react';
import { render } from 'react-dom';
class Button extends Component {
rebder() {
return <h1>Hello, Webpack</h1>
}
}
render(<Button />, window.document.getElementById('app'));
4、webpack loader配置的test需要匹配到tsx类型文件，并在extensions中也加上.tsx，配置如下
const path = require('path');
module.exports = {
// ts执行文件入口
entry: './main',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
},
resolve: {
// 先尝试ts，tsx后缀的typescript源码文件
extensions: ['.ts', '.tsx', '.js']
},
nodule: {
rules: [
{
// 同时匹配ts，tsx后缀的TypeScript文件
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
}
]
},
devtool: 'source-map', // 输出Source Map以方便在浏览器调试TypeScript代码
},
安装新的依赖：
npm i react react-dom @types/react @typpes/react-dom
使用Vue框架
虽然vue的项目能用可直接再浏览器运行的代码编写，但是为了方便编码，大多数的项目都会采用Vue官方单文件组件的写法去编写
认识Vue
App.vue代表一个单文件组件，它是项目唯一的组件，也是根组件
<!--渲染模版-->
<template>
<h1>{{ msg }}</h1>
</template>
<!--样式描述-->
<style scoped>
h1 {
color: red;
}
</style>
<!--组件逻辑-->
<script>
export default {
return {
msg: 'Hello, Webpack'
}
}
</script>
Vue的单文件组件通过类似HTML文件的.vue文件描述清楚一个组件的模版，样式，逻辑 main.js入口文件
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
});
接入Webpack
webpack相关配置
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader'],
}
]
}
安装新引入的依赖
# Vue框架运行需要的库
npm i -D vue-loader css-loader vue-template-compiler
作用：
- vue-loader：解析和转化.vue文件，提取其中的script，style，template，再分别将它们交给loader处理
- css-loader：加载由vue-loader提取出的css代码
- vue-template-compiler：将vue-loader提取出的html模版变异成对应可执行的js代码
使用TypeScript编写Vue应用
1、新增tsconfig.json配置文件
{
"compilerOptions": {
// 构建出es5版本的js，与vue浏览器保持一致
"target": "es5",
// 开启严格模式，这可以对`this`以上的数据属性进行更严格的推断
"strict": true,
// TypeScript编译器输出的js采用es2015模块化，使Tree Sharking生效
"module": "es2015",
"moduleResolution": "node"
}
}
2、修改App.vue脚本问价部分内容如下
<!--组件逻辑-->
<!--lang="ts"指明使用ts语法-->
<script lang="ts">
import Vue from "vue";
export default Vue.extenf ({
data() {
return {
msg: 'Hello, Webpack'
}
}
})
</script>
3、修改main.ts的执行入口文件如下
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: "#app",
render: h => h(App)
})
4、由于ts不认识.vue文件，所以为了让其支持import App from './App.vue'，还需要一下文件vue-shims.d.ts定义.vue文件的类型
// 告诉TypeScript编译器.vue文件其实是一个vue
declare module "*.vue" {
import Vue from "vue";
export defaule Vue;
}
5、webpack配置需要两个地方
const path = require('path');
module.exports = {
resolve: {
// 增加对TypeScript的.ts和.vue文件的支持
extensions: ['.ts', '.js', '.vue', '.json'],
},
module: {
rules: [
// 加载.ts文件
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
// 让tsc将vue文件当成一个TypeScript模块去处理，来解决moudle not found的问题，tsc本身不会处理.vue结尾的文件
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
记得安装新的依赖：
npm i -D ts-loader typescript
使用Angular2框架
认识Angular2
是AngularJS的下一个版本，继承了AngularJS的部分思想 Angular2比React和Vue多出一下概念
- 模块：不是指js或者其他语言的模块化，是Angular2的独有用法
- 注解：可通过注解语法@xxx来为一个Class附加元数据
- 服务：按照功能划分，将项目可复用的代码封装成一个个假服务以方便为其他模块使用，可以包含函数，常值等，常见的又日志服务，数据服务，应用程序配置等
- 依赖注入：也叫控制反转，是面向对象编程中的一种涉及原则，可以用来降低代码之间的耦合度
尝试来个Hello, Webpack 1、组件代码
import { Component } from '@angular/core';
// 通过注解的方式描述清楚这个视图所需要的模版，样式，数据，逻辑
@Component({
// 标签的名称
selector: 'app-root',
// HTML模版
template: '<h1>{{ msg }}</h1>',
// CSS样式
styles: ['h1{ color: red; }']
})
export class AppComponent {
msg = 'Hello, Webpack';
}
2、只有组件代码不够，还要实例化AppComponent视图组件，并将它渲染到Dom中，Angular2规定可运行的应用至少有一个NgModule，它描述了如何启动应用
// 让Angular2正常运行需要的polyfill
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
// Angular2框架的核心模块
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platfrom-browser-dynamic';
// 项目自定义视图组件
import { AppComponent } from './app.component';
@NgModule({
// 该NgModule所依赖的视图组件
declarations: [AppComponent],
// 该NgModule所依赖的其他NgModule
imports: [BroeserModule],
// 应用的根视图组件，只有根NgModule需要设置
bootstrap: [AppComponent]
})
class AppModule {
}
// 从AppModule启动应用
platformBrowserDynamic().bootstrapModule(AppModule);
3、改造index.html文件，插入标签app-root
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<app-root></app-root>
<!--导入Webpack输出的js文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
4、记得安装插件
# Augular2框架的基础核心模块
npm i -S @angular/core @angular/common
# Angular2框架的浏览器环境运行库类似于react-dom
npm i -S @angular/platform-browser
# 让Angular2正常运行时所依赖的运行环境和polyfill
npm i -S core-js rxjs zone.js
# 在浏览器运行过程中动态的编译HTMLL模版
npm i -S @angular/platform-browser-dynamic @angular/compiler
接入Webpack
因为Angular2应用采用TypeScript开发，所以构建与ts不同之处在于tsconfig.json配置。由于在Angular2项目中采用了注解的语法，且@angular-platform-browser有很多dom操作，所以需要修改配置如下
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
// 开启对注解的支持
"experimentalDecorators": true,
// Angular2依赖新的JavaScript API和DOM操作
"lib": [
"es2015",
"dom"
]
},
"exclude": [
"node_modules/*"
]
}
其他配置与ts配置保持一致便好
