根据create-react-app的再装备

2018-03-02 08:26:44来历:cnblogs.com作者:小火柴的蓝色抱负人点击

共享

前面的话

  运用Facebook官方推出的create-react-app脚手架,咱们根本能够零装备建立根据webpack的React开发环境。可是,假如需求个性化定制,则还需求根据create-react-app进行再装备

环境变量

  在根目录下新建.env.local文件,能够用于本地环境变量掩盖

  如在该文件中进行如下设置

PORT=2000

  则开发服务器会在2000端口敞开服务

装备署理

  在package.json中装备,与其他项目同级

  "scripts": {    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test --env=jsdom",    "eject": "react-scripts eject"  },  "proxy": {    "/api": {      "target": "https://m.weibo.cn",      "changeOrigin": true    }  }

  因为create-react-app默许支撑fetch,所以在组件中运用fetch获取数据,成果显现在了操控台中

fetch('api/comments/show?id=4199740256395164&page=1').then(res => {  res.json().then(data => {    console.log(data)  })})

装备别号

  运用react-app-rewired来进行react的再装备,首要运用npm装置

$ npm install react-app-rewired --save-dev

  然后,更改package.json中的scripts部分

  "scripts": {    "start": "react-app-rewired start",    "build": "react-app-rewired build",    "test": "react-app-rewired test --env=jsdom",    "eject": "react-app eject"  },

  然后,在根目录新建config-overrides.js文件,装备如下

const path = require('path');function resolve(dir) {    return path.join(__dirname, '.', dir)}module.exports = function override(config, env) {    config.resolve.alias = {        '@': resolve('src')    }    return config;}

  重启开发服务器后,就能够运用@来表明'src'的绝对路径了

相关文章

    无相关信息

微信扫一扫

明升m88.com微信大众渠道