dexteryy / project-webcube

Continuously updated JS infrastructure for modern web dev

Project WebCube (monorepo)

Continuously updated JS infrastructure for modern web dev

NOTE: This repo itself is also a template or starter for Universal JS monorepo

Packages

• webcube - Continuously updated JS infrastructure for modern Universal JS web app/site and static web.
  • eslint-config-webcube - A sharable ESLint presets which integrates Prettier and explicitly configures all-available rules (guaranteed by scripts) from ESLint core and commonly used plugins.
• nodecube - Continuously updated JS infrastructure for Node.js microservice or API gateway service.
• redux-cube - App state manager. A set of wrappers which simplify the use of Redux and its whole ecosystem, reduce boilerplate, and provide many features (Sub App, Reducer Bundle, ...)
  • redux-cube-with-router - redux-cube's pluggable module for react-router v4+
  • redux-cube-with-i18next - redux-cube's pluggable module for react-i18next
  • redux-cube-with-persist - redux-cube's pluggable module for redux-persist
  • redux-cube-with-immutable - redux-cube's pluggable module for redux-immutable
• redux-source - Using GraphQL schema and query language to access any data source (eg. RESTful APIs) and automatically generate reducers, actions and normalized state
  • redux-source-immutable - The Immutable.js version of redux-source
  • redux-source-connect - Connect React components to Redux states maintained by redux-source automatically
  • redux-source-connect-immutable - Connect React components to Redux states maintained by redux-source-immutable automatically
  • redux-source-with-notify - A React higher-order component for displaying notifications based on Redux states maintained by redux-source automatically
  • redux-source-with-block-ui - A React higher-order component for displaying "React Block UI" based on Redux states maintained by redux-source automatically
• react-with-scripts - Add third party script tags, JS SDK and tracking code without modifying any HTML code
• react-common-kit - Wrappers for some common used react components and utilities
• hifetch - A minimal higher-level wrapper around Fetch API

Starters

• Webcube's Starter For Standalone Repo
• Webcube's Starter For Project In Monorepo

Examples (in monorepo)

• webcube-todo-app
• webcube-examples

project-webcube's Issues

Are there any plans to add a CLI for scaffolding WebCube Projects?

then can simple initialize a webcube project with a simple command like this:
webcube init <template-name> <project-name>

关于isCloudEnv的一点想法

我觉得没必要再引入NODE_ENV='cloud'这个变量，因为静态资源文件配置单独的域名已经很普及了，第三方开源库都默认用 NODE_ENV='production'区分开发/生产环境，这样就冲突了。我认为用isProductionEnv && process.env.WEBCUBE_DEPLOY_STATIC_ROOT更合理一些。

//-----webpack.default.config.babel.js----
const getPublicPath = () => {
  if (isProductionEnv) {
    if (process.env.WEBCUBE_DEPLOY_STATIC_ROOT) {
      return process.env.WEBCUBE_DEPLOY_STATIC_ROOT;
    } else {
      return process.env.WEBCUBE_STATIC_ROOT;
    }
  } else {
    return '/static-for-dev/'
  }
}

publicPath: getPublicPath(),

可否自定义loaders和babelLoaderPlugins？

添加一个customConfig.babelLoaderPlugins字段？

loaders我想到的是利用对象来实现自定义：

const loaders = Object.assign({
   jsx: { test: /\.jsx?$/, ...}
   css: {test: /\.css$/, ...}
}, customConfig.loaders)

module: {
  loaders: Object.values(loaders)
}

我实际遇到的问题是：

1. 项目中有用到m4a文件；
2. 我想用lodash-webpack-plugin，redux-actions用到了lodash，项目中lodash-webpack-plugin可以把lodash的引用从100KB的减少到18KB，在webcube-example里面也减少到45KB左右。

webpack-md5-hash 有坑

https://github.com/erm0l0v/webpack-md5-hash/issues