everest-scripts

该仓库 fork 了 Create React App.中的react-scripts package

为适配优云 web 开发，本项目在react-scripts 2.0 的基础上做了 3 件事

添加 less-loader 和@uyun/less-plugin-themes 配合换肤使用
读取./.everestrc.js 合并到默认 webpak config
读取./webpack.config.js 合并到默认 webpak config

在老项目中升级 webpack

.everestrc.js example

module.exports = {
    //配置多入库
  entryChunk: {
    index: './src/entry/index.js',
    config: './src/entry/config.js'
  },
  // 同 webpack externals
  externals: {
    jquery: 'jQuery'
  },
  //配置别名，同 webpack alias
  alias: {
    Utils: './src/utils'
  }
};

./webpack.config.js example

若.everest.js还不满足需求，则可再跟目录添加./webpack.config.js,该文件通过webpack-merge合并到 react-script 提供的 webpack config 中。一般情况下无需用到该方法，比如想分析 js 包文件可以使用 Webpack Bundle Analyzer

install

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

Usage (as a plugin)

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

设置相对路径

package.json 中的 homePage 参数

  "homepage": ".",

设置 proxy

设置单个代理地址

比如配置所有非静态资源都代理到 http://newprod.dev.cn

  "proxy": "http://newprod.dev.cn",

设置多个代理地址可以建立 src/setupProxy.js文件

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(proxy(['/tenant', '/automation'], { target:'http://newprod.dev.cn' }));
    app.use(proxy(['/api/v3'], { target: 'http://newprod.dev.cn/cmdb' }));
};

配置自定义环境变量

你可以通过在 shell 中设置环境变量或使用 .env 来调整各种开发和生产设置。跟多配置请参考 create-react-app 高级配置

自定义环境变量须以 REACTAPP开头

<title>%REACT_APP_WEBSITE_NAME%</title>

还可以使用哪些其他 .env 文件？

左侧的文件比右侧的文件具有更高的优先级

. npm start: .env.development.local, .env.development, .env.local, .env

. npm run build: .env.production.local,.env.production, .env.local, .env

. npm test: .env.test.local, .env.test, .env (note .env.local is missing)

Current Tags

2.0.7 ... latest (6 years ago)