webpack搭建react+ts+eslint项目
【初始化项目】
mkdir react_ts_eslint
cd react_ts_eslint
npm init
【生成ts配置文件】
tsc --init
【安装相关依赖】
npm install typescript webpack webpack-cli webpack-dev-server ts-loader cross-env webpack-merge clean-webpack-plugin html-webpack-plugin -D npm install react @types/react react-dom @types/react-dom -D npm install redux react-redux @types/react-redux redux-logger redux-promise redux-thunk @types/redux-logger @types/redux-promise -D npm install react-router-dom @types/react-router-dom connected-react-router antd -D npm install eslint @typescript-eslit/eslint-plugin @typescript-eslit/parser -D npm install @types/jest ts-jest -D
【编写 /config/webpack.base.config.js】
/*
* @Description:
* @Date: 2020-12-11 15:34:09
* @Author: Jsmond2016 <jsmond2016@gmail.com>
* @Copyright: Copyright (c) 2020, Jsmond2016
*/ // 清理产出目录的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 产出 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = {
entry: './src/index.tsx',
output: {
// 输出目录
path: path.resolve(__dirname, '../dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
devServer: {
contentBase: '../dist',
inline:true,
},
module: {
rules: [
{
test: /\.(j|t)sx?/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['./dist']
}),
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
【编写 webpack.dev.config.js】
const { smart } = require('webpack-merge')
const base = require('./webpack.base.config')
module.exports = smart(base, {
mode: 'development',
devtool: 'inline-soruce-map'
})
【编写 webpack.prod.config.js】
const { smart } = require('webpack-merge')
const base = require('./webpack.base.config')
module.exports = smart(base, {
mode: 'production',
})
【新建 src/index.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>react-ts</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
【新建 src/index.tsx】
console.log('hello')
【配置 package.json 中的 dev, build 命令】
{
"name": "react-typeScript",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.config.js",
"build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.config.js",
"eslint": "eslint src --ext .js,.ts,.tsx",
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/jest": "^24.9.1",
"@types/react-redux": "^7.1.7",
"@types/react-router-dom": "^5.1.3",
"@types/redux-logger": "^3.0.7",
"@types/redux-promise": "^0.5.28",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.0",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"jest": "^25.1.0",
"react-redux": "^7.1.3",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"style-loader": "^1.1.3",
"ts-jest": "^25.0.0",
"ts-loader": "^6.2.1",
"typescript": "^3.7.5",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"antd": "^3.26.7",
"connected-react-router": "^6.6.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2"
}
}
【启动项目】
npm run dev /*webpack.dev.config.js文件的单词一定要严格书写正确*/
【如果报错】
/**可能会报错：smart is not a function*/
这是因为webpack-merge版本不兼容，需要制定版本：npm install webpack-merge@4.2.1 -D /**如果出现报错：Error: Cannot find module 'webpack-cli/bin/config-yargs,这个也是版本不兼容问题，需要指定一下版本号*/
终端运行命令：npm install webpack-cli@3.3 -D 安装成功后运行命令：npm run dev
【运行打包命令报错】
/**打包时出现报错，并提示你安装webpack-cli,然后一直安装不上，这时，你需要全局安装*/
npm install webpack -g
【配置eslint】
{
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint/eslint-plugin"
],
"extends": [
/** 使用推荐配置 */
"plugin:@typescript-eslint/recommended"
],
"rules": {
/** 配置规则 */
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-var-requires": "off"
}
}
/**记得在package.json新增eslint命令："eslint": "eslint src --ext .js,.ts,.tsx",*/
【单元测试：安装 jest 测试工具】
npm install @types/jest ts-jest -D /**另外还需要全局安装jest-cli*/
npm install jest-cli -g
【新建 jest.config.js 配置】
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node'
}
【编写测试文件】
// src/calc.tsx
function sum (a: number, b: number) {
return a + b
}
function minus (a: number, b: number) {
return a - b
}
module.exports = {
sum,
minus
}
// src/calc.test.jsx
let calc = require('./calc')
describe('测试calc', () => {
test('1+1', () => {
expect(calc.sum(1,1)).toBe(2)
})
test('111', () => {
expect(calc.minus(1,1)).toBe(0)
})
})
【配置 package.json 中 测试命令】
运行测试命令： npm run test
【6-支持 React，编写 src/index.tsx代码】
import React from 'react';
import ReactDom from 'react-dom' const Index = () => {
return (
<div>hello, world</div>
)
} ReactDom.render(<Index />, document.getElementById("root"))
【这时可能会标红语法问题，需要配置 tsconfig.json】
{
"compilerOptions": {
/** ... 新加这个 */
"jsx": "preserve", /** 'preserve' | 'react-native' | 'react' */
/** 'preserve' 表示保留 jsx 语法 和 tsx 后缀 */
/** 'react-native' 表示 保留 jsx 语法但会把后缀改为 js */
/** 'react' 表示不保留 jsx 语法，直接编译成 es5 */
}
}
【这时执行npm run dev命令，控制台可能会报错】
这是因为，项目还没添加babel转换器，浏览器无法识别jsx和es6语法
【解决方案】
首先需要安装最新的：npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D 然后在根目录创建.babelrc，并配置成：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
]
} 最后需要安装：npm install @babel/preset-react @babel/plugin-syntax-jsx @babel/plugin-proposal-decorators -D 并且在webpack.base.config.js中的module下的rules添加对象：
{
test: /\.(js|jsx|tsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx以及tsx文件（必须）
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-react',
],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-optional-chaining"],
["@babel/plugin-syntax-jsx"],
]
}
},//loader的名称（必须）
exclude: /node_modules/ //屏蔽不需要处理的文件（文件夹）（可选）
}
此时再运行启动命令：就可以看到项目可以启动了
webpack搭建react+ts+eslint项目的更多相关文章
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
- 从零搭建react+ts组件库（封装antd）
为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面 ...
- webpack 搭建React（手动搭建）
前言 最近真的都是在瞎学,看到自己不是很明白的东西,都喜欢自己手动去敲1到3遍(晚上下班的时候咯), 瞧,React 基于webpack 搭建,react 官方有一套手脚架工具,我自己也搭建过确实挺 ...
- 使用webpack搭建react开发环境
安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...
- 使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
- 使用create-react-app 搭建react + ts + antd框架
一.创建项目 使用npx create-react-app (项目名) --template typescript 创建项目 ①如果App.tsx文件有如下报错: (没有报错的请忽略) 需要将tsco ...
- vue-cli+webpack搭建简单的vue项目框架
0.先去官网下载安装nodeJS 1.在cmd中输入命令 node -version 若出现node版本号 则安装成功 2.通过命令:cd 文件夹名 进入某具体文件夹后进行如下命令操作: ...
- 用webpack搭建react开发环境
安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...
- 基于webpack的React项目搭建(一)
前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...
随机推荐
- 一、SQL高级语句
摘抄别的博主的博客主要总去CSDN看不太方便自己整理一下加深记忆! 导入文件至数据库 #将脚本导入 source 加文件路径 mysql> source /backup/test.sql; se ...
- DEFENSE-GAN: PROTECTING CLASSIFIERS AGAINST ADVERSARIAL ATTACKS USING GENERATIVE MODELS
目录 概 主要内容 Samangouei P, Kabkab M, Chellappa R, et al. Defense-GAN: Protecting Classifiers Against Ad ...
- 强强联袂！腾讯云TDSQL与国双战略签约，锚定国产数据库巨大市场
日前,腾讯云计算(北京)有限责任公司与北京国双科技有限公司签署了<国产数据库产品战略合作协议>,双方将在数据库技术方面展开深度合作,通过分布式交易型数据库的联合研发.产品服务体系建设.品牌 ...
- 编写Java程序，将JButton按钮按网格布局管理器格式放置
返回本章节 返回作业目录 需求说明: 将JButton按钮按网格布局管理器格式放置 实现思路: 实现代码: public void init(){ setLayout(new GridLayout(4 ...
- 每天学一点——while循环（2）、for循环
while循环(2) while+continue 打印数字的话相信朋友们在python中不会一个个的print吧 eg: 或者是打印列表里的元素 eg 这种方法只适用于你知道里面有多少个元素, 不然 ...
- Kafka版本介绍Version2.4.0
1.说明 Kafka的版本从0.11.0.X到1.0.X, 再到2.0.X大版本, 其实没有经过几个版本, 只是版本号变化较大. 2.最新发布版本 截止本文章2020年2月22号发布时, Kafka ...
- vue3 父菜单渲染出来了，但是子菜单渲染不出来的原因
子菜单始终渲染不出来,控制台出现警告如下: 在查看框架源码时,发现在渲染时应用了递归.在这个博客找到答案,原因是升级的vue的版本没有升级@vue/compiler-sfc的版本,这两个版本应该保持一 ...
- python安装第三方库的步骤
windows下举例:1.下载openpyxl,http://pypi.doubanio.com/simple/openpyxl/2.将下载后的文件解压放到Python文件夹下的Lib文件夹下3.cm ...
- linux 设置root 密码
指令意思: sudo -i 是 切换到root权限 ,如果没有密码,则直接可以操作,有密码则会要求输入密码 sudo passwd root 是修改密码指令 ,回车后 提示输入新密码 新密码需要输 ...
- layui type:2 iframe子页面向父页面传值
需求: 选择子页面表格中的radio或者双击该行,得到的该行数据传到父页面,由父页面渲染. 网上的各种方法都用了,父页面就是获取不到子页面传的值,过了一晚上,睡了一觉,柳暗花明又一村. layui t ...