Initialize the project

create a folder project

Now we’ll turn this folder into an npm package.

npm init -y

This creates a package.json file with default values.

Install our dependencies

First ensure Webpack is installed.

npm install --save-dev webpack webpack-cli

Webpack is a tool that will bundle your code and optionally all of its dependencies into a single .js file.

Let’s now add React and React-DOM, along with their declaration files, as dependencies to your package.json file:

npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

That @types/ prefix means that we also want to get the declaration files for React and React-DOM. Usually when you import a path like "react", it will look inside of the react package itself; however, not all packages include declaration files, so TypeScript also looks in the @types/react package as well. You’ll see that we won’t even have to think about this later on.

Next, we’ll add development-time dependencies on the ts-loader and source-map-loader.

npm install --save-dev typescript ts-loader source-map-loader

Both of these dependencies will let TypeScript and webpack play well together. ts-loader helps Webpack compile your TypeScript code using the TypeScript’s standard configuration file named tsconfig.json. source-map-loader uses any sourcemap outputs from TypeScript to inform webpack when generating its own sourcemaps. This will allow you to debug your final output file as if you were debugging your original TypeScript source code.

Please note that ts-loader is not the only loader for typescript. You could instead use awesome-typescript-loader.

Read about the differences between them:

https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader

Notice that we installed TypeScript as a development dependency. We could also have linked TypeScript to a global copy with npm link typescript, but this is a less common scenario.

Add a TypeScript configuration file #

You’ll want to bring your TypeScript files together - both the code you’ll be writing as well as any necessary declaration files.

To do this, you’ll need to create a tsconfig.json which contains a list of your input files as well as all your compilation settings. Simply create a new file in your project root named tsconfig.json and fill it with the following contents:

{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}

You can learn more about tsconfig.json files:

http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Write some code

Let’s write our first TypeScript file using React. First, create a file named Hello.tsx in src/components and write the following:

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

Note that while this example uses function components, we could also make our example a little classier as well.

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component<HelloProps, {}> {
render() {
return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
}
}

Next, let’s create an index.tsx in src with the following source:

import * as React from "react";
import * as ReactDOM from "react-dom"; import { Hello } from "./components/Hello"; ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);

We just imported our Hello component into index.tsx. Notice that unlike with "react" or "react-dom", we used a relative path to Hello.tsx - this is important. If we hadn’t, TypeScript would’ve instead tried looking in our node_modules folder.

We’ll also need a page to display our Hello component. Create a file at the root of proj named index.htmlwith the following contents:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div> <!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script> <!-- Main -->
<script src="./dist/main.js"></script>
</body>
</html>

Notice that we’re including files from within node_modules. React and React-DOM’s npm packages include standalone .js files that you can include in a web page, and we’re referencing them directly to get things moving faster. Feel free to copy these files to another directory, or alternatively, host them on a content delivery network (CDN). Facebook makes CDN-hosted versions of React available, and you can read more about that here.

https://reactjs.org/docs/getting-started.html#development-vs.-production-builds


Create a webpack configuration file

Create a webpack.config.js file at the root of the project directory.

module.exports = {
mode: "production", // Enable sourcemaps for debugging webpack's output.
devtool: "source-map", resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx"]
}, module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
]
}, // When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};

Putting it all together

npx webpack

引入html-webpack-plugin 实现html模版自动生成

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: "./src/index.tsx",
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader’.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
// 用来替换全局变量
// externals: {
// react: "React",
// "react-dom": "ReactDOM"
// }
};

npm i webpack-dev-server -D

更新package.json

"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}

react: typescript project initialize的更多相关文章

  1. react typescript jest config (一)

    1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...

  2. react + typescript 学习

    react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...

  3. React + Typescript领域初学者的常见问题和技巧

    React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...

  4. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  5. 前端自动化测试 —— TDD环境配置(React+TypeScript)

    欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...

  6. React + TypeScript:元素引用的传递

    React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...

  7. react+typescript报错集锦<持续更新>

    typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...

  8. React & TypeScript

    之前看了一下 TypeScript 的知识,但是一直没有上手,最近开始结合 React 和 TypeScript 一起尝试了一下,感受还是很好的,所以写一下笔记. 环境配置没有参考其他东西,就是看了下 ...

  9. [TypeScript] Dynamically initialize class properties using TypeScript decorators

    Decorators are a powerful feature of TypeScript that allow for efficient and readable abstractions w ...

随机推荐

  1. 5.Maven坐标

    而这个坐标也意味着jar包等保存在 C:\Users\用户名.m2\repository\org\apache\tomcat\tomcat-catalina\9.0.2

  2. 并查集例题02.带权并查集(poj1182)

    Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A.现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底 ...

  3. idea打包或编译错误,错误为c盘idea路径某些文件被占用(非idea文件,项目生成的文件)

    方法列表(2的效果可能更好) 1.将被占用的文件删除之后,重新打包或编译. 2.多编译几次项目. 3.发现真正可能的原因.(貌似被南航企业版360拦截了,导致targe或maven等文件被占用问题) ...

  4. mysql 5.7.18安装教程

    安装之前 确认是否已安装旧版mysql.如有,则卸载(注意需要的数据备份). /etc/init.d/mysqld stop yum remove mysql mysql-* rm -rf /var/ ...

  5. NKOJ4241 蚯蚓 (【NOIP2016 DAY2】)

    问题描述 输入格式 第一行包含六个整数n,m,q,u,v,t,其中:n,m,q的意义见问题描述: u,v,t均为正整数:你需要自己计算p=u/v(保证0<u<v)t是输出参数,其含义将会在 ...

  6. 使用Markdown编辑总结

    Markdown是轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档. Markdown可以导出HTML .Word.图像.PDF.Epub 等多种格式的文档. 后缀为.md或者.markdo ...

  7. dis反汇编查看实现

    dis库是python(默认的CPython)自带的一个库,可以用来分析字节码 >>> import dis >>> def add(a, b = 0): ... ...

  8. js 调用铃声

    <audio autoplay="autoplay" id="auto" src=""> </audio> play ...

  9. adb工作常用命令

    adb devices 查看手机名 adb shell链接手机 dumpsys window windows |grep -i current 打开软件,查看软件入口,和包名,白色为包名,红框为包入口 ...

  10. 【php】COOKIE和SESSION

    一. COOKIE(小甜点,小饼干) a) 生活中的实例: i. 大保健的会员卡(记录你的姓名.性别.ID号码.手机号……) ii. 超市的会员卡(记录你的姓名,性别,会员积分) b) PHP当中的实 ...