搭建react移动端项目记录（一）

不愧是我
1,630 阅读3分钟
第一步create-react-app

使用官方脚手架

第二步npm run eject

弹出配置文件，方便以后对配置进行更改

配置rem

已经有很多人在使用vw,但是我还是用rem比较舒服，我一般用的依赖管理工具是yarn

  • yarn add -D postcss-px2rem-exclude： 安装postcss-px2rem-exclude插件
  • yarn add -D lib-flexible: 这两个可以配合使用

打开config/webpack.config.js文件

// 第一步引入
const px2rem = require('postcss-px2rem-exclude');

// 第二步
const getStyleLoaders = (cssOptions, preProcessor) => {
    .....(省略代码)
    plugins: () => [ // 找到这些代码
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),
        // ！！！新加配置在这
        px2rem({remUnit:75,exclude: /node_modules/i}) // 在这加入这句就可以了
    .....(省略代码)
}

打开 src/index.js

import "lib-flexible";

当不使用lib-flexible时，1rem === 75px

对了，在public/index.html文件中把原来的<meta name="viewport"... 换成下面这句

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

使用scss

看下文档吧，比较简单，安装几个依赖就好了

facebook.github.io/create-reac…

如果需要引入全局的scss资源文件,在所有SASS样式中使用共享变量时：

  • yarn add -D sass-resources-loader： 这个加载器将 @import 您的SASS资源放入每个required SASS模块中

打开config/webpack.config.js文件

// 找到如下代码
{
  test: sassRegex,
  exclude: sassModuleRegex,
  // 看源码可以看出来 getStyleLoaders 返回的是一个数组，所以我们可以用 concat把他合并
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'sass-loader'
  ).concat({ // ！！！！加这段代码
    // 这行的意思是引入加载器 sass-resources-loader
    loader: 'sass-resources-loader',
    options: {
      // 这里是需要引入全局的资源文件，它可以是一个字符串或者是一个数组， 通常用数组去代替。
      resources: ['./src/assets/scss/_variables.scss', './src/assets/scss/mixins.scss']
    }
  }),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},

这个配置是在这看到的：www.xiejiahe.com/blog/detail…

react配置多个代理,跨域解决方案

使用反向代理呀，在vue中可以直接在vue.config.js中proxy设置就好，react的设置可以是这样(react目前我只知道这个)：

使用插件(=.=)

  • yarn add http-proxy-middleware： 安装http-proxy-middleware插件 然后在src目录下新建一个setupProxy.js文件，内容如下：
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(proxy('/api', { 
    target: 'http://****.com' ,
    secure: false,
    changeOrigin: true,
    pathRewrite: {
    "^/api": "/"
    },
  }))
}

如果要代理多个，那多写几个就好了，跟vue一样

跨域就这样解决了，这个文件不需要再项目中任何文件去引用，它自己会帮你执行，意不意外 (0.0)，本来在 package.json直接配置就可以的，但是最新版本不可以这么写了，详细可以看下这里

facebook.github.io/create-reac…

多环境打包

我一般会写一个文件封装axios，会根据process.env.NODE_ENV配置不同baseURL
vue有环境变量文件不用这么麻烦，不过react不是很熟，所以先这样了
react 会有一个默认的打包命令npm run build or yarn build
假设你要打包一个test环境的包（其它环境同理）可以这样：

scripts/build.js 这个文件复制一份命名，例：build.test.js

// 修改这句就好了
process.env.NODE_ENV = 'test';

然后要在package.json中设置打包命令呀，如下

"scripts": {
   "start": "node scripts/start.js",
   "build": "node scripts/build.js",
   "test": "node scripts/test.js",
   "build:test": "node scripts/build.test.js" //  这是新加的
 }

yarn build:test 就可以了，记着，baseURL要根据process.env.NODE_ENV设置不同的域名

最后

有人看的话，上文写的有错误的地方，麻烦指出一下，立马改。感谢.....
有更好的解决方案？先谢谢了，希望大神们能指点一二或指个路

avatar
文章
阅读
粉丝