create-react-app 开发配置

配置路径

当页面嵌套过深时我们会发现在路径通常都要这么写 import xx from './../../../xxx/qqq'
通过配置webpack可以写成 import xx from '@/xxx/qqq'

// 修改 webpack.config.dev 与 webpack.config.prod 两个文件 加入相同配置

...

// +++ 找个开心的地方加入配置
function resolve(dir) {
    return path.join(__dirname,'..',dir)
}

// 修改
alias: {
      'react-native': 'react-native-web',// +++ 加入配置
      '@': resolve('src')
}

• 优点: 如果按照相对路径的方法引用，每次要计算.. 并且文件一旦迁移 那么又要重新计算，如此配置文件迁移也不需要计算

• 缺点: 在部分编辑器可能会失去文件引用高亮，但并不影响.

注 :这属于webpack的配置，当然在vue-cli中也适用

按需引用atnd-mobile

• 先安装 babel-plugin-import

npm i babel-plugin-import -D

// pageage.json 文件
  "babel": {
    "presets": [
      "react-app"
    ],// 加入配置
    "plugins": [
      ["import",{ "libraryName": "antd-mobile","style": "css" }]
    ]
  },

设置代理

在开发中往往是跨域请求的，配置一下请求代理可以解决这个问题

// pageage.json 文件
"proxy": "http://xxx.xxx",

css局部化

• 正常导入css情况下会污染到全局

• 修改 webpack-config-dev.js 配置 (如没有该文件请使用npm run eject 弹出)

options: {
  modules: true,localIdentName: '__[local]--[hash:base64:5]'
}

支持装饰器写法

• 安装 transform-decorators-legacy

npm install --save-dev babel-plugin-transform-decorators-legacy

//  pageage.json 文件 在刚刚配置 ant 下面加上

"babel": {
    "presets": [
      "react-app"
    ],"plugins": [
      ...ant配置,// 加入配置
      "transform-decorators-legacy"
    ]
  }