使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。

初始化项目

创建一个空文件夹demo,使用npm在空文件夹初始化项目。

npm init
npm install --save-dev webpack
npm install --save-dev typescript
npm install --save-dev awesome-typescript-loader

这里添加了webpack,typescript和awesome-typescript-loader作为开发依赖。

配置tsconfig.json

在项目下添加文件tsconfig.json,设置compiler options

"compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

其他tsconfig.json的compiler options参考:https://www.typescriptlang.org/docs/handbook/compiler-options.html

这里指定了typescript转译后输出的是es5,默认为es3。

配置webpack.config.js

在项目下添加文件webpack.config.js,内容如下:

const path = require('path');
module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "awesome-typescript-loader"
            },
        ]
    },
};

这里指定了ts后缀的文件loader为awesome-typescript-loader。

html文件

创建目录public存放静态文件,在public下新建index.html,内容如下:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>webpack TypeScript Patterns</title>
  </head>
  <body>
  <script src="main.bundle.js"></script>
  </body>
</html>

Typescript脚本

在项目下创建src文件夹,存放typescript脚本。在src下新建文件index.ts,内容如下:

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = `${firstName} ${middleInitial} ${lastName}`;
    }
}
interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person : Person) {
    return `Hello, ${person.firstName} ${person.lastName}`;
}
const user = new Student('Jane', 'M.', 'User');
document.body.innerHTML = greeter(user);

示例来源于:TypeScript in 5 minutes

构建项目

在项目下执行:

./node_modules/.bin/webpack

拷贝public/index.html到dist

cp public/index.html dist

在dist用浏览器打开index.html。至此完成了一个简单的demo。

版权声明:著作权归作者所有。

相关推荐

使用laptop脚本搭建macOS的web和移动开发环境

搭建开发环境往往是很痛苦的事,在github上有一个laptop的开源项目,它实际上是一个脚本,它集成了在macOS上搭建web或移动开发的一些工具。项目地址:https://github.com/thoughtbot/laptopmac版本支持目前它已测试支持的macOS版本包括:macOS Mavericks (10.9)macOS Yosemite (

React 16.2:Fragments语法的使用

React 16.2最大的变化是新增了fragments特性,fragments语法。示例:返回一首诗的片段敬请阅读 <h2>面朝大海,春暖花开</h2> <p>从明天起,做一个幸福的人</p> <p>喂马、劈柴,周游世界</p> <p>...</> React 16之前的版本在Re

TypeScript:let和const变量声明

在开始介绍let和const变量声明前,有必要先了解下JavaScript里的var变量声明。var变量声明全局声明var声明在函数体外,所声明的变量为全局变量。var name = "张三"; var所声明的全局变量会作为window的一个属性,可以使用"."来引用。如上例的name引用:console.log(window.