cra脚手架安装typescript

在工作中用ts也算是用了一段时间，但是用的感觉不太好，用的磕磕绊绊的。很多比较高级的写法都没怎么掌握，导致现在还是很多ts报错解决不了。那么只好从头开始学习一遍了。既然是从头，我就想从cra开始，自己去安装ts和eslint，结合自己的一些习惯，定制一个应用。废话不多说，开始吧。

我们先用cra创建一个应用出来。

npx create-react-app cra-ts
cd cra-ts

安装typescript依赖

yarn add typesciprt

单单这样还是不够的，我们还要在项目的根目录下创建一个ts的配置文件tsconfig.json。

并且需要配置一些属性。

{"compilerOptions": {// 生成文件存放目录"outDir": "./built",// 接受js代码作为输入"allowJs": true,// 将js代码编译成指定版本"target": "es5",},"include": [// 读取src目录下的所有可识别文件"./src/**/*",]
}

现在运行tsc就可以在根目录下的built文件夹看到经过编译的js文件了。

这只是我们手动输入tsc编译的出来的结果，我们的理想效果是在输入yarn build / yarn start 的时候，webpack能够自动的去编译ts,这样我们就需要对webpack进行一些单独的配置。首先，需要在项目根目录下建立一个webpack的配置文件webpack.config.js。

并且配置一些属性。

const path = require("path");module.exports = {// 入口文件entry: "./src/index.ts",// 编译后的文件输出到./dist并且命名为bundle.jsoutput: {filename: "./dist/bundle.js",},// 选择一种格式来调试webpackd的输出devtool: "source-map",resolve: {// 路径别名alias: {"@": path.resolve(__dirname, "src/"),},// 按顺序解析这些后缀名extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],},module: {// 将其他文件编译成jsrules: [{ test: /\.css$/, use: "css-loader" },{ test: /\.tsx?$/, use: "ts-loader" },{ test: /\.js$/, use: "source-map-loader", enforce: "pre" },]}
}

接下来就是安装所需要的loader了。

yarn add css-loader ts-loader source-map-loader

这样webpack就能编译ts文件了。

cra脚手架安装typescript相关推荐

React脚手架及CRA脚手架的使用
React 1.使用: 不能直接在浏览器运行,因为有组件系统和jsx 解决方法:webpack解析组件系统.JSX 2.React脚手架 CRA - react官方推荐使用国内:蚂蚁金服: Dva ...
NPM 安装 TypeScript 和 npm 的 Invalid package.json 错误以及运行第一个typescript程序
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程). TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计 ...
npm教程：如何查看TypeScript版本、卸载TypeScript和安装TypeScript
npm教程:如何查看TypeScript版本.卸载TypeScript和安装TypeScript TypeScript是JavaScript的一个超集,也可以编译成JavaScript:适用任何浏览器 ...
mac 安装typescript
typescript官方地址 1. 首先全局安装typescript npm install -g typescript 安装成功之后如图 2.配置全局变量终端输入: vim ~/.bash_pro ...
vue脚手架安装时出现Error EPERM operation not permitted这个错误
vue脚手架安装时出现Error: EPERM: operation not permitted这个错误 **原因:**出现这个错误是因为安装全局模块时没有管理员权限,需要以管理员身份运行命令提示符窗 ...
vue-cli2.x旧版本卸载不掉的问题解决方案（亲测+踩坑）附Vue脚手架安装教程
旧版本卸载问题说明 vue2.x脚手架旧版本卸载不掉的问题:(卸载命令运行后输入vue --version仍一直显示旧版本) 问题解释首先明确一点,卸载不掉肯定说明你的电脑中至少有两个地方存在脚手 ...
Vue脚手架安装与 Vue项目创建运行、vue项目迁移后运行失败问题
目录 Vue脚手架安装 vue 如何查看vue cli的安装位置 Vue项目创建与运行 1.创建项目 2.运行项目 3.检测运行是否成功项目文件作用介绍快捷安装项目所需依赖命令 npm i Vu ...
vue-lic脚手架安装与部署项目流程
安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 ...
Vue脚手架安装常用命令
创建vue项目时文件夹内容要为空不然无法创建 cmd切换盘符:E:回车. 切换淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taob ...
解决vuecli脚手架安装失败
我们通常会用到脚手架vuecli创建项目,此时需要安装脚手架.但有时会遇到安装失败的情况 1.全局安装脚手架: npm i -g @vue/cli 2.查看脚手架版本: vue --version 3 ...

cra脚手架安装typescript

cra脚手架安装typescript相关推荐

最新文章

热门文章