From 5048b1b731a878efea16fecb55e2038defb05fa8 Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Mon, 3 Jun 2019 22:10:38 -0400 Subject: [PATCH] Compile ESM bundle to CJS using Babel instead of Rollup. (#4911) * Compile ESM bundle to CJS using Babel instead of Rollup. https://github.com/apollographql/apollo-client/issues/4843#issuecomment-495717720 Fixes #4843. * Bump apollo-cache-inmemory bundle size limit from 5KB to 5.05KB. * Mention PR #4911 in CHANGELOG.md. --- CHANGELOG.md | 3 ++ config/rollup.config.js | 78 ++++++++++++++++++++++++---------- package-lock.json | 93 ++++++++++++++++++++++++++++++++++++++--- package.json | 5 ++- 4 files changed, 152 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b484e06013..67b0153053a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## Apollo Client (vNEXT) +- In all Apollo Client packages, the compilation of `lib/bundle.esm.js` to `lib/bundle.cjs.js` and `lib/bundle.umd.js` now uses Babel instead of Rollup, since Babel correctly compiles some [edge cases](https://github.com/apollographql/apollo-client/issues/4843#issuecomment-495717720) that neither Rollup nor TypeScript compile correctly.
+ [@benjamn](https://github.com/benjamn) in [#4911](https://github.com/apollographql/apollo-client/pull/4911) + ### Apollo Cache In-Memory - Pretend that `__typename` exists on the root Query when matching fragments.
diff --git a/config/rollup.config.js b/config/rollup.config.js index a0dda885253..e3a1a16bf40 100644 --- a/config/rollup.config.js +++ b/config/rollup.config.js @@ -2,6 +2,10 @@ import nodeResolve from 'rollup-plugin-node-resolve'; import typescriptPlugin from 'rollup-plugin-typescript2'; import typescript from 'typescript'; import path from 'path'; +import fs from 'fs'; +import { transformSync } from '@babel/core'; +import cjsModulesTransform from '@babel/plugin-transform-modules-commonjs'; +import umdModulesTransform from '@babel/plugin-transform-modules-umd'; import invariantPlugin from 'rollup-plugin-invariant'; import { terser as minify } from 'rollup-plugin-terser'; @@ -49,29 +53,14 @@ export function rollup({ return './lib/' + outputPrefix + '.' + format + '.js'; } - function convert(format) { + function fromSource(format) { return { - input: outputFile('esm'), + input, external, output: { file: outputFile(format), format, sourcemap: true, - name, - globals, - }, - onwarn, - }; - } - - return [ - { - input, - external, - output: { - file: outputFile('esm'), - format: 'esm', - sourcemap: true, }, plugins: [ nodeResolve({ @@ -90,14 +79,61 @@ export function rollup({ }), ], onwarn, - }, - convert('umd'), - convert('cjs'), + }; + } + + function fromESM(toFormat) { + return { + input: outputFile('esm'), + output: { + file: outputFile(toFormat), + format: 'esm', + sourcemap: false, + }, + // The UMD bundle expects `this` to refer to the global object. By default + // Rollup replaces `this` with `undefined`, but this default behavior can + // be overridden with the `context` option. + context: 'this', + plugins: [{ + transform(source, id) { + const output = transformSync(source, { + inputSourceMap: JSON.parse(fs.readFileSync(id + '.map')), + sourceMaps: true, + plugins: [ + [toFormat === 'umd' ? umdModulesTransform : cjsModulesTransform, { + loose: true, + allowTopLevelThis: true, + }], + ], + }); + + // There doesn't seem to be any way to get Rollup to emit a source map + // that goes all the way back to the source file (rather than just to + // the bundle.esm.js intermediate file), so we pass sourcemap:false in + // the output options above, and manually write the CJS and UMD source + // maps here. + fs.writeFileSync( + outputFile(toFormat) + '.map', + JSON.stringify(output.map), + ); + + return { + code: output.code, + }; + } + }], + } + } + + return [ + fromSource('esm'), + fromESM('cjs'), + fromESM('umd'), { input: outputFile('cjs'), output: { file: outputFile('cjs.min'), - format: 'cjs', + format: 'esm', }, plugins: [ minify({ diff --git a/package-lock.json b/package-lock.json index b7f215776ac..5e8d317ce33 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,17 +13,17 @@ } }, "@babel/core": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.4.tgz", - "integrity": "sha512-lQgGX3FPRgbz2SKmhMtYgJvVzGZrmjaF4apZ2bLwofAKiSjxU0drPh4S/VasyYXwaTs+A1gvQ45BN8SQJzHsQQ==", + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.5.tgz", + "integrity": "sha512-OvjIh6aqXtlsA8ujtGKfC7LYWksYSX8yQcM8Ay3LuvVeQ63lcOKgoZWVqcpFwkd29aYU9rVx7jxhfhiEDV9MZA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "@babel/generator": "^7.4.4", "@babel/helpers": "^7.4.4", - "@babel/parser": "^7.4.4", + "@babel/parser": "^7.4.5", "@babel/template": "^7.4.4", - "@babel/traverse": "^7.4.4", + "@babel/traverse": "^7.4.5", "@babel/types": "^7.4.4", "convert-source-map": "^1.1.0", "debug": "^4.1.0", @@ -34,6 +34,29 @@ "source-map": "^0.5.0" }, "dependencies": { + "@babel/parser": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.5.tgz", + "integrity": "sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==", + "dev": true + }, + "@babel/traverse": { + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz", + "integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@babel/generator": "^7.4.4", + "@babel/helper-function-name": "^7.1.0", + "@babel/helper-split-export-declaration": "^7.4.4", + "@babel/parser": "^7.4.5", + "@babel/types": "^7.4.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.11" + } + }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -42,6 +65,12 @@ "requires": { "ms": "^2.1.1" } + }, + "globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true } } }, @@ -86,12 +115,45 @@ "@babel/types": "^7.0.0" } }, + "@babel/helper-module-imports": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz", + "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==", + "dev": true, + "requires": { + "@babel/types": "^7.0.0" + } + }, + "@babel/helper-module-transforms": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.4.4.tgz", + "integrity": "sha512-3Z1yp8TVQf+B4ynN7WoHPKS8EkdTbgAEy0nU0rs/1Kw4pDgmvYH3rz3aI11KgxKCba2cn7N+tqzV1mY2HMN96w==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/helper-simple-access": "^7.1.0", + "@babel/helper-split-export-declaration": "^7.4.4", + "@babel/template": "^7.4.4", + "@babel/types": "^7.4.4", + "lodash": "^4.17.11" + } + }, "@babel/helper-plugin-utils": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz", "integrity": "sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==", "dev": true }, + "@babel/helper-simple-access": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz", + "integrity": "sha512-Vk+78hNjRbsiu49zAPALxTb+JUQCz1aolpd8osOF16BGnLtseD21nbHgLPGUwrXEurZgiCOUmvs3ExTu4F5x6w==", + "dev": true, + "requires": { + "@babel/template": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, "@babel/helper-split-export-declaration": { "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", @@ -146,6 +208,27 @@ "@babel/helper-plugin-utils": "^7.0.0" } }, + "@babel/plugin-transform-modules-commonjs": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.4.4.tgz", + "integrity": "sha512-4sfBOJt58sEo9a2BQXnZq+Q3ZTSAUXyK3E30o36BOGnJ+tvJ6YSxF0PG6kERvbeISgProodWuI9UVG3/FMY6iw==", + "dev": true, + "requires": { + "@babel/helper-module-transforms": "^7.4.4", + "@babel/helper-plugin-utils": "^7.0.0", + "@babel/helper-simple-access": "^7.1.0" + } + }, + "@babel/plugin-transform-modules-umd": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.2.0.tgz", + "integrity": "sha512-BV3bw6MyUH1iIsGhXlOK6sXhmSarZjtJ/vMiD9dNmpY8QXFFQTj+6v92pcfy1iqa8DeAfJFwoxcrS/TUZda6sw==", + "dev": true, + "requires": { + "@babel/helper-module-transforms": "^7.1.0", + "@babel/helper-plugin-utils": "^7.0.0" + } + }, "@babel/polyfill": { "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.4.4.tgz", diff --git a/package.json b/package.json index 60c711b77eb..ed3accf7086 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ { "name": "apollo-cache-inmemory", "path": "./packages/apollo-cache-inmemory/lib/bundle.cjs.min.js", - "maxSize": "5 kB" + "maxSize": "5.05 kB" }, { "name": "apollo-client", @@ -60,6 +60,9 @@ "graphql-anywhere": "file:packages/graphql-anywhere" }, "devDependencies": { + "@babel/core": "7.4.5", + "@babel/plugin-transform-modules-commonjs": "7.4.4", + "@babel/plugin-transform-modules-umd": "7.2.0", "@condenast/bundlesize": "0.18.1", "@octokit/rest": "16.27.3", "@types/benchmark": "1.0.31",