react: typescript project initialize
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.html
with 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的更多相关文章
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- React + Typescript领域初学者的常见问题和技巧
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- 前端自动化测试 —— TDD环境配置(React+TypeScript)
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
- React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
- react+typescript报错集锦<持续更新>
typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...
- React & TypeScript
之前看了一下 TypeScript 的知识,但是一直没有上手,最近开始结合 React 和 TypeScript 一起尝试了一下,感受还是很好的,所以写一下笔记. 环境配置没有参考其他东西,就是看了下 ...
- [TypeScript] Dynamically initialize class properties using TypeScript decorators
Decorators are a powerful feature of TypeScript that allow for efficient and readable abstractions w ...
随机推荐
- tensorflow CNN 卷积神经网络中的卷积层和池化层的代码和效果图
tensorflow CNN 卷积神经网络中的卷积层和池化层的代码和效果图 因为很多 demo 都比较复杂,专门抽出这两个函数,写的 demo. 更多教程:http://www.tensorflown ...
- TensorFlow系列专题(七):一文综述RNN循环神经网络
欢迎大家关注我们的网站和系列教程:http://panchuang.net/ ,学习更多的机器学习.深度学习的知识! 目录: 前言 RNN知识结构 简单循环神经网络 RNN的基本结构 RNN的运算过程 ...
- Selenium系列(十五) - Web UI 自动化基础实战(2)
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
- SpringBoot,SpringMvc, SpringCloud
1,SpringBoot VS SpringMvc VS SpringBoot SpringBoot: SpringBoot 是一个快速开发的框架,能够快速的整合第三方框架,简化XML配置,全部采用注 ...
- 软件架构的演进:单体、垂直、SOA、微服务
软件架构演进 软件架构的发展经历了从单体结构.垂直架构.SOA架构到微服务架构的过程,以下为具体分类: 1.1.1 单体架构 特点: 1.所有的功能集成在一个项目工程中. 2.所有的功能打一 ...
- [codevs2597]团伙<并查集>
题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的朋友是我的朋友: 我敌人的敌人也是我的朋友 ...
- (3)SQL Server表分区
1.简介 当一个表数据量很大时候,很自然我们就会想到将表拆分成很多小表,在执行查询时候就到各个小表去查,最后汇总数据集返回给调用者加快查询速度.比如电商平台订单表,库存表,由于长年累月读写较多,积累数 ...
- 关于C#三层架构增删改查中的“添加”问题
关于“添加”功能的实现比较简单: 先来一个简单的界面: 然后是代码: ··采用的是三层架构的思想写的·· 在DAO中的方法为: (使用了动软自动生成代码) 希望对您有所帮助!
- 11. SpringCloud实战项目-初始化数据库和表
SpringCloud实战项目全套学习教程连载中 PassJava 学习教程 简介 PassJava-Learning项目是PassJava(佳必过)项目的学习教程.对架构.业务.技术要点进行讲解. ...
- Linux学习,path,环境变量的配置
方法一: 1.查看当前环境变量配置的所与信息 echo $PATH 注意: echo是输出的意思 加$表示它是一个变量 2.配置环境命令 PATH="$PATH":comdir 注 ...