From 56e80ad1a39d0d1e878db9fd9a8fd737559814dc Mon Sep 17 00:00:00 2001 From: Neo Date: Tue, 9 Apr 2019 16:25:12 +0800 Subject: [PATCH] fix typo and update doc --- docs/docs/browser-support.md | 6 +-- .../src/utils/__tests__/webpack.config.js | 39 ++++++++----------- packages/gatsby/src/utils/webpack.config.js | 12 +++--- 3 files changed, 25 insertions(+), 32 deletions(-) diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md index 76035882921f6..3186b0f582a2c 100644 --- a/docs/docs/browser-support.md +++ b/docs/docs/browser-support.md @@ -49,8 +49,6 @@ By default, Gatsby emulates the following config: If you only support newer browsers, make sure to specify this in your `package.json`. This will often enable you to ship smaller JavaScript files. -## Note about IE < 11 +## Note about IE support -React depends on collection types `Map` and `Set`. While these are not used by Gatsby, Gatsby uses React and you will need to polyfill these if you support older browsers and devices including IE < 11. - -Read more about this in [https://reactjs.org/docs/javascript-environment-requirements.html](https://reactjs.org/docs/javascript-environment-requirements.html) +Gatsby will polyfil minimum requirements for IE support according to the `browserslist` config. diff --git a/packages/gatsby/src/utils/__tests__/webpack.config.js b/packages/gatsby/src/utils/__tests__/webpack.config.js index fb9f9ce146163..bbe7f97627a4b 100644 --- a/packages/gatsby/src/utils/__tests__/webpack.config.js +++ b/packages/gatsby/src/utils/__tests__/webpack.config.js @@ -17,6 +17,7 @@ const { DefinePlugin } = require(`webpack`) const { readFileSync } = require(`fs-extra`) const webpackConfig = require(`../webpack.config`) const { store } = require(`../../redux`) +const { joinPath } = require(`../path`) beforeEach(() => { DefinePlugin.mockClear() @@ -119,53 +120,47 @@ describe(`environment variables`, () => { }) }) -describe(`polyfil for ie support`, () => { - it(`should not add ie polyfil if ie is not supported`, async () => { +describe(`polyfill for ie support`, () => { + const directory = `gatsby-app` + const appEntry = joinPath(directory, `.cache/production-app`) + + it(`should not add ie polyfill if ie is not supported`, async () => { const config = await getConfig( { browserslist: `defaults, not ie >= 9` }, - `gatsby-app`, + directory, `build-javascript` ) - expect(config.entry.app).toEqual([`gatsby-app/.cache/production-app`]) + expect(config.entry.app).toEqual([appEntry]) }) - it(`should add ie9 polyfil if ie >= 9 is supported`, async () => { + it(`should add ie9 polyfill if ie >= 9 is supported`, async () => { const config = await getConfig( { browserslist: `defaults, ie >= 9` }, - `gatsby-app`, + directory, `build-javascript` ) - expect(config.entry.app).toEqual([ - `react-app-polyfill/ie9`, - `gatsby-app/.cache/production-app`, - ]) + expect(config.entry.app).toEqual([`react-app-polyfill/ie9`, appEntry]) }) - it(`should add ie9 polyfil if ie >= 10 is supported`, async () => { + it(`should add ie9 polyfill if ie >= 10 is supported`, async () => { const config = await getConfig( { browserslist: `defaults, ie >= 10` }, - `gatsby-app`, + directory, `build-javascript` ) - expect(config.entry.app).toEqual([ - `react-app-polyfill/ie9`, - `gatsby-app/.cache/production-app`, - ]) + expect(config.entry.app).toEqual([`react-app-polyfill/ie9`, appEntry]) }) - it(`should add ie11 polyfil if ie >= 11 is supported`, async () => { + it(`should add ie11 polyfill if ie >= 11 is supported`, async () => { const config = await getConfig( { browserslist: `defaults, ie >= 11` }, - `gatsby-app`, + directory, `build-javascript` ) - expect(config.entry.app).toEqual([ - `react-app-polyfill/ie11`, - `gatsby-app/.cache/production-app`, - ]) + expect(config.entry.app).toEqual([`react-app-polyfill/ie11`, appEntry]) }) }) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 636b5d1d96c87..d568be73d11c2 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -30,16 +30,16 @@ module.exports = async ( ) => { const directoryPath = withBasePath(directory) - // Polyfil for IE support + // Polyfill for IE support const supportedBrowsers = browserslist(program.browserslist) - let iePolyfil = false + let iePolyfill = false if ( supportedBrowsers.includes(`ie 9`) || supportedBrowsers.includes(`ie 10`) ) { - iePolyfil = `react-app-polyfill/ie9` + iePolyfill = `react-app-polyfill/ie9` } else if (supportedBrowsers.includes(`ie 11`)) { - iePolyfil = `react-app-polyfill/ie11` + iePolyfill = `react-app-polyfill/ie11` } process.env.GATSBY_BUILD_STAGE = suppliedStage @@ -164,7 +164,7 @@ module.exports = async ( case `develop`: return { commons: [ - iePolyfil, + iePolyfill, `event-source-polyfill`, `${require.resolve( `webpack-hot-middleware/client` @@ -182,7 +182,7 @@ module.exports = async ( } case `build-javascript`: return { - app: [iePolyfil, directoryPath(`.cache/production-app`)].filter( + app: [iePolyfill, directoryPath(`.cache/production-app`)].filter( Boolean ), }