create-react-app + Typescript脚手架搭建
<p class="p1">1、创建使用ts的新项目</p><p class="p1">yarn create react-app my-test-app --template typescript</p>
<p class="p1"> </p>
<p class="p1">2、配置tsconfig.json</p>
<p class="p1">（1）在根目录下新建文件tsconfig.extend.json</p>
<div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"]
}
}
}
</pre>
</div>
<p> </p>
</div>
<div>（2）在tsconfig.json中新增</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"extends": "./tsconfig.extend.json"
</pre>
</div>
<p> </p>
<p>（3）允许装饰器语法</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"experimentalDecorators": true
</pre>
</div>
<p> </p>
</div>
</div>
<p class="p1">3、安装依赖</p>
<p class="p1">（1）yarn add antd</p>
<p class="p1">（2）安装craco以覆盖webpack配置</p>
<p class="p1">yarn add @craco/craco</p>
<div>修改package.json</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
</pre>
</div>
<p> </p>
</div>
<p class="p1">（3）安装其他craco插件</p>
<p class="p1">yarn add craco-antd</p>
<p class="p1">yarn add craco-less</p>
<p class="p1">yarn add craco-alias</p>
<p class="p1">（4）在根目录下新建craco.config.js文件</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const CracoAntDesignPlugin = require("craco-antd");
const CracoAlias = require("craco-alias");
const CracoLessPlugin = require("craco-less");
const path = require('path');
module.exports = {
plugins: [
/* antd组件按需加载&样式覆盖等 */
{
plugin: CracoAntDesignPlugin,
options: {
customizeThemeLessPath: path.join(
__dirname,
"src/styles/antd.theme.less"
),
},
},
/* 支持less module */
{
plugin: CracoLessPlugin,
options: {
cssLoaderOptions: {
modules: { localIdentName: "_" },
},
modifyLessRule: function(lessRule, _context) {
lessRule.test = /\.(module)\.(less)$/;
lessRule.exclude = path.join(__dirname, 'node_modules');
return lessRule;
},
},
},
/* 别名设置 */
{
plugin: CracoAlias,
options: {
source: "tsconfig",
baseUrl: "./src",
tsConfigPath: "./tsconfig.extend.json"
}
},
],
devServer: (devServerConfig) => {
return {
...devServerConfig,
// 服务开启gzip
compress: true,
proxy: {
'/api': {
target: 'https://test.com/',
changeOrigin: true,
xfwd: false,
}
}
}
}
};
</pre>
</div>
<p>（5）在react-app-env.d.ts文件中新增（否则将无法正常使用less module！！！）</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">/* 允许在ts中使用import styles from '*.less' */
declare module '*.less' {
const styles: any;
export = styles;
}
</pre>
</div>
<p>（6）安装eslint</p>
<p>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks --dev</p>
<p>在根目录下新建.eslintrc.js</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'airbnb',
'airbnb/hooks',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
tsx: true,
modules: true
},
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: [
'react',
'@typescript-eslint',
],
rules: {
"react/jsx-filename-extension": }],
"@typescript-eslint/explicit-function-return-type": ,
"react/state-in-constructor": 0,
"import/extensions": ,
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/no-static-element-interactions": 0,
"react/jsx-props-no-spreading": 0,
"no-unused-expressions": 0,
"jsx-a11y/anchor-is-valid": 0,
"no-nested-ternary": 0,
"react/static-property-placement": 0,
"object-curly-newline": 0,
},
settings: {
"import/resolver": {
node: {
extensions: [".js", ".jsx", ".ts", ".tsx"]
},
typescript: {
directory: "./tsconfig.json"
}
},
},
};
</pre>
</div>
<p>（7）prettier</p>
<div>
<p>yarn add prettier eslint-config-prettier eslint-plugin-prettier -D</p>
<p>在根目录下新建.prettierrc.js</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">module.exports ={
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 2,
"useTabs": false
};
</pre>
</div>
<p>修改.eslintrc.js</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">extends: [
...
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
</pre>
</div>
<p>（8）stylelint</p>
<p>yarn add stylelint stylelint-config-recommended stylelint-config-recess-order stylelint-config-standard -D</p>
<p>在根目录下新建.stylelintrc.json</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
"extends": [
"stylelint-config-recommended",<br> "stylelint-config-recess-order",
"stylelint-config-standard"
],
"rules": {
"indentation": 2,
"selector-pseudo-class-no-unknown": [ true, { "ignorePseudoClasses": ["global"] } ]
}
}
</pre>
</div>
<p> </p>
<p>（9）增加pre-commit</p>
<p>yarn add pre-commit --dev</p>
<p>yarn add lint-staged --dev</p>
<div>修改package.json的scripts</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"lint": "eslint src --fix --ext .ts,.tsx",
"lint-staged": "lint-staged"</pre>
</div>
</div>
<div>在package.json增加</div>
<div>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">"lint-staged": {
"**/*.{ts,tsx,less}": [
"prettier --write"
],
"**/*.{ts,tsx}": "yarn lint",
"**/*.less": "stylelint --syntax less"
},
"husky": {
"hooks": {
"pre-commit": "yarn lint-staged"
}
}
</pre>
</div>
<p> </p>
</div>
</div><br><br>
来源：https://www.cnblogs.com/jessicaDuan/p/12955363.html
頁:
[1]