diff --git a/README.md b/README.md index e6a2a5a..4553739 100644 --- a/README.md +++ b/README.md @@ -158,6 +158,18 @@ $ yarn build > **NOTE**: You can change environment variables in `.env.development` for Development mode or `.env.production` for Production mode. +## Scripts + +| Script | Description | +| --------- | ------------------------------------------------------------------------------------- | +| dev | Start the development server. | +| start | Start the production server. | +| build | Remove the previous bundled files and bundle it (include client & server) to `dist/`. | +| wp | Bundle client to `dist/`. | +| analyze | Visualize the contents of all your bundles. | +| storybook | Start the storybook server. | +| test | Run testing. | + ## Enable/Disable offline - In `src/tools/webpack.config.js`: @@ -188,23 +200,80 @@ $ yarn build } ``` -## Scripts +## Supported Browsers -| Script | Description | -| --------- | ------------------------------------------------------------------------------------- | -| dev | Start the development server. | -| start | Start the production server. | -| build | Remove the previous bundled files and bundle it (include client & server) to `dist/`. | -| wp | Bundle client to `dist/`. | -| analyze | Visualize the contents of all your bundles. | -| storybook | Start the storybook server. | -| test | Run testing. | +By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use [react-app-polyfill](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill). + +```bash +$ yarn add react-app-polyfill core-js +# or npm install --save react-app-polyfill core-js +``` + +You can import the entry point for the minimal version you intend to support to ensure that the minimum language features are present that are required to use in your project. For example, if you import the IE9 entry point, this will include IE10 and IE11 support. + +### **Internet Explorer 9** + +```js +// This must be the first line in /src/client/app/index.js +import 'react-app-polyfill/ie9'; + +// ... +``` + +### **Internet Explorer 11** + +```js +// This must be the first line in /src/client/app/index.js +import 'react-app-polyfill/ie11'; + +// ... +``` + +## Polyfilling Other Language Features + +You can also polyfill stable language features not available in your target browsers. If you're using this in Create React App, it will automatically use the browserslist you've defined to only include polyfills needed by your target browsers when importing the stable polyfill. **Make sure to follow the Internet Explorer steps above if you need to support Internet Explorer in your application.** + +```js +// This must be the first line in /src/client/app/index.js +import 'react-app-polyfill/stable'; + +// ... +``` + +If you are supporting Internet Explorer 9 or Internet Explorer 11 you should include both the ie9 or ie11 and stable modules: + +### **Internet Explorer 9** + +```js +// This must be the first line in /src/client/app/index.js +import 'react-app-polyfill/ie9'; +import 'react-app-polyfill/stable'; + +// ... +``` + +### **Internet Explorer 11** + +```js +// This must be the first line in /src/client/app/index.js +import 'react-app-polyfill/ie11'; +import 'react-app-polyfill/stable'; + +// ... +``` + +## Type Checking For Editor + +- [Visual Studio Code](https://flow.org/en/docs/editors/vscode/) +- [Atom](https://flow.org/en/docs/editors/atom/) +- [Sublime Text](https://flow.org/en/docs/editors/sublime-text/) +- [Etc.](https://flow.org/en/docs/editors/) ## Contributors - [htdangkhoa](https://github.com/htdangkhoa) -## Special thanks +## Special Thanks - [(react-cool-starter) - wellyshen](https://github.com/wellyshen/react-cool-starter) diff --git a/package.json b/package.json index a322beb..a35f437 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "scripts": { "start": "env-cmd -e production node dist/index.js", "dev": "env-cmd -e development nodemon --inspect=0.0.0.0:58585 src/index.js --exec babel-node", - "predev": "flow stop && flow", "build": "BABEL_ENV=production babel --minified --no-comments src -D -d dist && npm run wp", "prebuild": "del dist", "postbuild": "del dist/**/__tests__", @@ -161,7 +160,6 @@ "commander": "^5.0.0", "compression": "^1.7.4", "connected-react-router": "^6.5.2", - "core-js": "^3.6.5", "cors": "^2.8.5", "css-modules-require-hook": "^4.2.3", "del": "^5.1.0", @@ -184,7 +182,6 @@ "passport-jwt": "^4.0.0", "prop-types": "^15.7.2", "react": "^16.10.2", - "react-app-polyfill": "^1.0.6", "react-cookie": "^4.0.1", "react-dev-utils": "^10.0.0", "react-dom": "^16.11.0", diff --git a/src/client/index.js b/src/client/index.js index d7f656c..b713cec 100644 --- a/src/client/index.js +++ b/src/client/index.js @@ -1,7 +1,4 @@ /* @flow */ -import 'react-app-polyfill/ie11'; -import 'react-app-polyfill/stable'; -import 'core-js/stable'; import './vendor'; import '../i18n'; import React, { Suspense } from 'react'; diff --git a/src/tools/webpack.config.js b/src/tools/webpack.config.js index 69ddde2..36da035 100644 --- a/src/tools/webpack.config.js +++ b/src/tools/webpack.config.js @@ -120,7 +120,7 @@ module.exports = { module: { rules: [ { - test: /\.js?$/, + test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', options: { cacheDirectory: isDev }, diff --git a/yarn.lock b/yarn.lock index 19ce91d..ad5d990 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2981,7 +2981,7 @@ arrify@^1.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= -asap@~2.0.3, asap@~2.0.6: +asap@~2.0.3: version "2.0.6" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= @@ -4707,11 +4707,6 @@ core-js@^3.0.1, core-js@^3.0.4, core-js@^3.2.1: resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.8.tgz#e0fc0c61f2ef90cbc10c531dbffaa46dfb7152dd" integrity sha512-b+BBmCZmVgho8KnBUOXpvlqEMguko+0P+kXCwD4vIprsXC6ht1qgPxtb1OK6XgSlrySF71wkwBQ0Hv695bk9gQ== -core-js@^3.5.0, core-js@^3.6.5: - version "3.6.5" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a" - integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA== - core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -11720,13 +11715,6 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -promise@^8.0.3: - version "8.1.0" - resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e" - integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q== - dependencies: - asap "~2.0.6" - prompts@^2.0.1: version "2.3.0" resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.0.tgz#a444e968fa4cc7e86689a74050685ac8006c4cc4" @@ -11893,13 +11881,6 @@ quick-lru@^1.0.0: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8" integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g= -raf@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" - integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== - dependencies: - performance-now "^2.1.0" - ramda@^0.21.0: version "0.21.0" resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35" @@ -11953,18 +11934,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-app-polyfill@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0" - integrity sha512-OfBnObtnGgLGfweORmdZbyEz+3dgVePQBb3zipiaDsMHV1NpWm0rDFYIVXFV/AK+x4VIIfWHhrdMIeoTLyRr2g== - dependencies: - core-js "^3.5.0" - object-assign "^4.1.1" - promise "^8.0.3" - raf "^3.4.1" - regenerator-runtime "^0.13.3" - whatwg-fetch "^3.0.0" - react-clientside-effect@^1.2.0: version "1.2.2" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837" @@ -14945,7 +14914,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.5: dependencies: iconv-lite "0.4.24" -whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0: +whatwg-fetch@>=0.10.0: version "3.0.0" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb" integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==