rtaro-ui是基于taro开发的第三方组件库，可以在taro脚手架可以直接使用，在React脚手架里使用需要修改配置。

公司自研脚手架gem-mine

示例详见gitlab(2019-09-18更新)，具体使用步骤如下：

引入相关依赖包

  1.  "dependencies": {    
  2.         "rtaro-ui": "^1.4.22",
  3.     "@rtarojs/react-adapter": "^1.3.20"
  4.  }

在文件babel.config.js增加按需加载配置

  1. [
  2.       'import',
  3.       {
  4.         libraryName: 'rtaro-ui',
  5.         style: name => {
  6.           return name.replace('h5', 'style')
  7.         },
  8.         // style:false,// 样式按需暂时不支持变量自定义主题，可以人工引入每个组件的样式来做按需
  9.         customName: function(name) {
  10.           return `rtaro-ui/dist/h5/components/${name.replace('at-','')}`
  11.         }
  12.       }
  13. ]

在gem-mine.config中修改webpack配置

  1. const { proxyConfig } = require('./src/config/request/proxy')
  2. const { setChainWebpack, getMainFields } = require('@rtarojs/react-adapter')
  3. module.exports = {
  4.   hardSource: true,
  5.   bundleAnalyzer: false,
  6.   /**
  7.    * 本地开发时，需要代理转发的请求
  8.    */
  9.   proxyConfig,
  10.   chainWebpack(config) {
  11.     setChainWebpack(config)
  12.   },
  13.   configureWebpack: {
  14.     // normal webpack config
  15.     resolve: {
  16.       mainFields: getMainFields()
  17.     }
  18.   }
  19. }

社区常用脚手架

示例详见gitlab(2019-09-18更新)，具体使用步骤如下：

引入相关依赖包

  1. "devDependencies": {
  2.     "babel-plugin-import": "^1.12.0",
  3.     "customize-cra": "^0.4.1",
  4.     "node-sass": "^4.12.0",
  5.     "react-app-rewired": "^2.1.3",
  6.     "react-scripts": "^3.0.1"
  7.   },
  8.  "dependencies": {    
  9.         "@rtarojs/react-adapter": "^1.3.20",
  10.     "create-react-class": "^15.6.3",
  11.     "prop-types": "^15.7.2",
  12.     "rtaro-ui": "^1.4.22",
  13.  }

新增babel.config.js

  1. module.exports = {
  2.   presets: [
  3.     '@babel/preset-react',
  4.     [
  5.       '@babel/preset-env',
  6.       {
  7.         targets: {
  8.           ie: '9'
  9.         },
  10.         useBuiltIns: 'entry',
  11.         corejs: 3,
  12.         modules: 'cjs'
  13.       }
  14.     ]
  15.   ],
  16.   plugins: [
  17.     '@babel/plugin-transform-runtime',
  18.     '@babel/plugin-syntax-dynamic-import',
  19.     ['@babel/plugin-proposal-decorators', { legacy: true }],
  20.     ['@babel/plugin-proposal-class-properties', { loose: true }]
  21.   ]
  22. }

新增config-overrides.js修改webpack配置

  1. const path = require('path')
  2. const {
  3.   override,
  4.   fixBabelImports,
  5.   addWebpackAlias,
  6.   addWebpackResolve,
  7.   addPostcssPlugins
  8. } = require('customize-cra')
  9. const { getPostcssPlugins, getBabelRules, getMainFields } = require('@rtarojs/react-adapter')
  10. const addBabelRules = rule => config => {
  11.   if (!config.module) {
  12.     config.module = {}
  13.   }
  14.   config.module.rules.push(rule)
  15.   return config
  16. }
  17. module.exports = override(
  18.   addWebpackResolve({ mainFields: getMainFields() }),
  19.   addBabelRules(getBabelRules()),
  20.   addPostcssPlugins(getPostcssPlugins()),
  21.   fixBabelImports('rtaro-ui', {
  22.     style: name => {
  23.       return `${name.replace('h5', 'style')}.scss`
  24.     },
  25.     customName: function(name) {
  26.       return `rtaro-ui/dist/h5/components/${name.replace('at-', '')}`
  27.     }
  28.   })
  29. )