龚箭

react项目初始化

react项目初始化

  1. 优化import
  2. 使用styled-components
  3. 统一css
  4. React-router
  5. 使用SVG图片
  6. 统一读取svg目录的文件

1.优化import

在tscinfig.json中添加,可以吧src当做根目录路直接import “app.tsx”

    "compilerOptions": {
        +  "baseUrl": "src",
    }

2. 使用styled-components

使用styled-components进行css

安装

    yarn add styled-components
    yarn add --dev @types/styled-components

使用

    import styled from 'styled-components'
    const Button = styled.button`
      color:red
    `
    const App = ()=>{
        return (
            <Button></Button>
        )
    }

3. 统一css

在scss或者css文件中添加

    @ihelpermport-normalize;

4. React-router

参考文档

设置404页面

    <Switch>
        <Route path="*">
            404,页面不存在
        </Route>
    </Switch>

设置默认显示页

    <Switch>
        <Redirect exact from="/" to="/money">
    </Switch>

5. 跨平台CSS中文字体解决方案

中文字体 css github

6. 使用SVG图片

如果在项目中使用SVG图片,需要借助svg-sprite-loader进行编译
配置方法如下

  1. 显示react的配置文件
    yarn eject
  1. 安装svg-sprite-loader
    yarn add --dev svg-sprite-loader
    yarn add --dev svgo-loader
  1. 配置config/webpack.config.js
    oneOf:[
        + {
        +  test: /\.svg$/,
        +  use: [
        +    { loader: 'svg-sprite-loader', options: {} },
        +    {loader:'svgo-loader',options:{}}
        +  ]
        + }
    ]

svgo-loader:SVG优化
svg-transform-loader: 对SVG图片进行优化(不需要)

4.配置完成后需要重新运行项目

    yarn start
  1. 引入SVG图片
     require("../icons/test.svg")
     <svg fill="red" className="className">
         <use xlinkHref="#test(文件名)"/>
     <svg>
    
    ==如果使用import xx from “”引入会触发TreeShaking机制,react会自动删除==

6. 统一读取svg目录的文件

    let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
    try {importAll(require.context('icons', true, /\.svg$/));} catch (error) {console.log(error);}

安装

    yarn add --dev @types/webpack-env

参考文档

47

文章

12

标签