React17配置

liangjinghao

已于 2022-05-16 23:24:28 修改

阅读量505

点赞数 1

文章标签： react.js 前端 reactjs

于 2022-02-23 22:35:42 首次发布

本文链接：https://blog.csdn.net/liangjinghao/article/details/123098711

版权

*搭建项目：

1.npx create-react-app my-app

npx create-react-app my-app --template typescript //支持typesrcipt

2.npm install

3.启动项目: npm start

*插件: react-icons --在button中添加图标

*插件: jwt-decode --解析jwt token的插件

*插件：react-credit-cards --一个react的信用卡插件，提供了内置样式，支付功能等

*插件：typescript-plugin-css-modules --save-dev 一个TypeScript语言服务插件，提供对CSS模块的支持-源码

typescript-plugin-css-modules的配置

1.在tsconfig.ts中：

{
    "compilerOptions": {
        "jsx":"react-jsx",
        "noImplicitAny": false,
        "plugins":[
            {
                "name":"typescript-plugin-css-modules"
            }
        ],
        "esModuleInterop": true
    }
    
}

2.创建settings.json:

加入

{

"typescript.tsdk": "node_modules/typescript/lib",

"typescript.enablePromptUseWorkspaceTsdk": true

}

*typescript自动映射any的配置:

*React-router:

安装：

npm install react-router-dom

如果需要React-router支持Typescript，还需安装：

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

引入全局scss

npm i sass-resources-loader --save-dev

yarn run eject

{
    test: sassModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 3,
            sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            modules: {
                getLocalIdent: getCSSModuleLocalIdent,
            },
        },
        'sass-loader'
    )
},