feat(build): es2015 bundle artifact (#6291)

* es2015 bundle with dependencies via npm script build:es:bundle
* es2015 bundle without dependencies via npm script build:es:bundle
* jest dependency for test:artifact
* migrate babel.config.json to babel.config.js and maintain env support for commonjs and es2015
* remove polyfill
* fix es syntax: replace module.exports with export
* fix es syntax: remove .jsx extension inside import
This commit is contained in:
Tim Lai
2020-08-13 17:21:55 -07:00
committed by GitHub
parent d9f5691f65
commit 2eaa6c10e4
22 changed files with 4296 additions and 32 deletions

View File

@@ -3,6 +3,7 @@ env:
browser: true
node: true
es6: true
jest: true
parserOptions:
ecmaFeatures:
jsx: true

5
.gitignore vendored
View File

@@ -11,9 +11,12 @@ selenium-debug.log
chromedriver.log
test/e2e/db.json
docs/_book
dist/log*
# dist
flavors/**/dist/*
/lib
/es
dist/log*
# Cypress
test/e2e-cypress/screenshots

View File

@@ -1,3 +1,2 @@
recursive: true
require: ['esm','@babel/register','source-map-support', 'test/mocha/setup.js']
# spec: 'test/mocha/**/*.{js,jsx}'

View File

@@ -1,5 +1,58 @@
{
module.exports = {
"env": {
"commonjs": {
"presets": [
[
"@babel/preset-env",
{
"debug": false,
"modules": "commonjs",
"targets": {
"node": "8"
},
"forceAllTransforms": false,
"ignoreBrowserslistConfig": true
}
],
"@babel/preset-react",
],
"plugins": [
[
"@babel/plugin-transform-modules-commonjs",
{
"loose": true
}
],
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread",
"@babel/plugin-proposal-optional-chaining",
]
},
"es": {
"presets": [
[
"@babel/preset-env",
{
"debug": false,
"modules": false
}
],
"@babel/preset-react",
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 2,
"version": "^7.10.4"
}
],
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread",
"@babel/plugin-proposal-optional-chaining",
]
},
"development": {
"presets": [
[

8
config/.eslintrc Normal file
View File

@@ -0,0 +1,8 @@
{
"rules": {
"import/no-unresolved": 0,
"import/extensions": 0,
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}

View File

@@ -0,0 +1,7 @@
const path = require('path');
module.exports = {
rootDir: path.join(__dirname, '..', '..'),
testEnvironment: 'jsdom',
testMatch: ['**/test/build-artifacts/es-bundle-core.js'],
};

View File

@@ -0,0 +1,7 @@
const path = require('path');
module.exports = {
rootDir: path.join(__dirname, '..', '..'),
testEnvironment: 'jsdom',
testMatch: ['**/test/build-artifacts/es-bundle.js'],
};

View File

@@ -0,0 +1,7 @@
const path = require('path');
module.exports = {
rootDir: path.join(__dirname, '..', '..'),
testEnvironment: 'jsdom',
testMatch: ['**/test/build-artifacts/umd.js'],
};

4057
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -2,6 +2,7 @@
"name": "swagger-ui",
"version": "3.31.1",
"main": "dist/swagger-ui.js",
"module": "dist/swagger-ui-es-bundle.js",
"homepage": "https://github.com/swagger-api/swagger-ui",
"repository": "git@github.com:swagger-api/swagger-ui.git",
"contributors": [
@@ -16,11 +17,13 @@
"license": "Apache-2.0",
"scripts": {
"automated-release": "release-it -VV --config ./release/.release-it.json",
"build": "run-p --aggregate-output build-core build-bundle build-standalone build-stylesheets",
"build": "run-p --aggregate-output build-core build-bundle build-standalone build-stylesheets build:core:commonjs build:core:es build:es:bundle build:es:bundle:core",
"build-bundle": "webpack --colors --config webpack/bundle.babel.js",
"build-core": "webpack --colors --config webpack/core.babel.js",
"build-standalone": "webpack --colors --config webpack/standalone.babel.js",
"build-stylesheets": "webpack --colors --config webpack/stylesheets.babel.js",
"build:es:bundle": "webpack --colors --config webpack/es-bundle.babel.js",
"build:es:bundle:core": "webpack --colors --config webpack/es-bundle-core.babel.js",
"predev": "npm install",
"dev": "webpack-dev-server --config webpack/dev.babel.js",
"deps-license": "license-checker --production --csv --out $npm_package_config_deps_check_dir/licenses.csv && license-checker --development --csv --out $npm_package_config_deps_check_dir/licenses-dev.csv",
@@ -34,6 +37,10 @@
"just-test-in-node": "cross-env BABEL_ENV=test mocha \"test/mocha/**/*.{js,jsx}\"",
"test-e2e-cypress": "cypress run",
"test-e2e-selenium": "sleep 3 && nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json",
"test:artifact": "run-s test:artifact:umd:bundle test:artifact:es:bundle test:artifact:es:bundle:core",
"test:artifact:umd:bundle": "npm run build-bundle && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-umd-bundle.config.js",
"test:artifact:es:bundle": "npm run build:es:bundle && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-es-bundle.config.js",
"test:artifact:es:bundle:core": "npm run build:es:bundle:core && cross-env BABEL_ENV=commonjs jest --config ./config/jest/jest.artifact-es-bundle-core.config.js",
"e2e-initial-render": "nightwatch test/e2e-selenium/scenarios/ --config test/e2e-selenium/nightwatch.json --group initial-render",
"mock-api": "json-server --watch test/e2e-selenium/db.json --port 3204",
"hot-e2e-cypress-server": "webpack-dev-server --config webpack/dev-e2e.babel.js --content-base test/e2e-cypress/static",
@@ -99,6 +106,7 @@
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"@babel/register": "^7.10.1",
"@jest/globals": "=26.4.0",
"@release-it/conventional-changelog": "=1.1.0",
"autoprefixer": "^9.0.0",
"babel-eslint": "^10.0.0",
@@ -130,6 +138,7 @@
"ignore-assets-webpack-plugin": "^2.0.1",
"imports-loader": "^0.8.0",
"inspectpack": "=4.5.2",
"jest": "=26.4.0",
"jsdom": "^11.10.0",
"json-loader": "^0.5.7",
"json-merger": "^1.1.2",

View File

@@ -1,6 +1,6 @@
import Callbacks from "./callbacks"
import RequestBody from "./request-body"
import OperationLink from "./operation-link.jsx"
import OperationLink from "./operation-link"
import Servers from "./servers"
import ServersContainer from "./servers-container"
import RequestBodyEditor from "./request-body-editor"

View File

@@ -26,4 +26,4 @@ function makeWindow() {
return win
}
module.exports = makeWindow()
export default makeWindow()

3
src/index.js Normal file
View File

@@ -0,0 +1,3 @@
import SwaggerUI from "./core"
export default SwaggerUI

View File

@@ -1,4 +1,4 @@
import Topbar from "./topbar.jsx"
import Topbar from "./topbar"
export default function () {
return {

View File

@@ -0,0 +1,14 @@
{
"rules": {
"import/no-unresolved": 0,
"import/extensions": 0,
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}

View File

@@ -0,0 +1,8 @@
import { describe, expect, test } from '@jest/globals';
import SwaggerUI from '../../dist/swagger-ui-es-bundle-core';
describe('webpack browser es-bundle-core build', () => {
test('should export a function for es-bundle-core', () => {
expect(SwaggerUI).toBeInstanceOf(Function);
});
});

View File

@@ -0,0 +1,8 @@
import { describe, expect, test } from '@jest/globals';
import SwaggerUI from '../../dist/swagger-ui-es-bundle';
describe('webpack browser es-bundle build', () => {
test('should export a function for es-bundle', () => {
expect(SwaggerUI).toBeInstanceOf(Function);
});
});

View File

@@ -0,0 +1,8 @@
import { describe, expect, test } from '@jest/globals';
import SwaggerUI from '../../dist/swagger-ui-bundle';
describe('webpack browser umd build', () => {
test('should export a function for (umd) bundle', () => {
expect(SwaggerUI).toBeInstanceOf(Function);
});
});

View File

@@ -2,9 +2,18 @@
* @prettier
*/
/** Dev Note:
* StatsWriterPlugin is disabled by default; uncomment to enable
* when enabled, rebuilding the bundle will cause error for assetSizeLimit,
* which we want to keep out of CI/CD
* post build, cli command: npx webpack-bundle-analyzer <path>
*/
import configBuilder from "./_config-builder"
import { DuplicatesPlugin } from "inspectpack/plugin"
import { WebpackBundleSizeAnalyzerPlugin } from "webpack-bundle-size-analyzer"
// import path from "path"
// import { StatsWriterPlugin } from "webpack-stats-plugin"
const result = configBuilder(
{
@@ -16,8 +25,7 @@ const result = configBuilder(
{
entry: {
"swagger-ui-bundle": [
"./src/polyfills.js", // TODO: remove?
"./src/core/index.js",
"./src/index.js",
],
},
output: {
@@ -31,6 +39,10 @@ const result = configBuilder(
verbose: false,
}),
new WebpackBundleSizeAnalyzerPlugin("log.bundle-sizes.swagger-ui.txt"),
// new StatsWriterPlugin({
// filename: path.join("log.bundle-stats.swagger-ui.json"),
// fields: null,
// }),
]
}
)

View File

@@ -14,8 +14,8 @@ const result = configBuilder(
{
entry: {
"swagger-ui": [
"./src/polyfills.js", // TODO: remove?
"./src/core/index.js",
// "./src/polyfills.js", // TODO: remove?
"./src/index.js",
],
},

View File

@@ -0,0 +1,51 @@
/**
* @prettier
*/
/** Dev Note:
* StatsWriterPlugin is disabled by default; uncomment to enable
* when enabled, rebuilding the bundle will cause error for assetSizeLimit,
* which we want to keep out of CI/CD
* post build, cli command: npx webpack-bundle-analyzer <path>
*/
import configBuilder from "./_config-builder"
import { DuplicatesPlugin } from "inspectpack/plugin"
import { WebpackBundleSizeAnalyzerPlugin } from "webpack-bundle-size-analyzer"
// import path from "path"
// import { StatsWriterPlugin } from "webpack-stats-plugin"
const result = configBuilder(
{
minimize: true,
mangle: true,
sourcemaps: true,
includeDependencies: false,
},
{
entry: {
"swagger-ui-es-bundle-core": [
"./src/index.js",
],
},
output: {
library: "SwaggerUIBundle",
libraryTarget: "commonjs2",
},
plugins: [
new DuplicatesPlugin({
// emit compilation warning or error? (Default: `false`)
emitErrors: false,
// display full duplicates information? (Default: `false`)
verbose: false,
}),
new WebpackBundleSizeAnalyzerPlugin("log.es-bundle-core-sizes.swagger-ui.txt"),
// new StatsWriterPlugin({
// filename: path.join("log.es-bundle-core-stats.swagger-ui.json"),
// fields: null,
// }),
]
}
)
export default result

View File

@@ -0,0 +1,51 @@
/**
* @prettier
*/
/** Dev Note:
* StatsWriterPlugin is disabled by default; uncomment to enable
* when enabled, rebuilding the bundle will cause error for assetSizeLimit,
* which we want to keep out of CI/CD
* post build, cli command: npx webpack-bundle-analyzer <path>
*/
import configBuilder from "./_config-builder"
import { DuplicatesPlugin } from "inspectpack/plugin"
import { WebpackBundleSizeAnalyzerPlugin } from "webpack-bundle-size-analyzer"
// import path from "path"
// import { StatsWriterPlugin } from "webpack-stats-plugin"
const result = configBuilder(
{
minimize: true,
mangle: true,
sourcemaps: true,
includeDependencies: true,
},
{
entry: {
"swagger-ui-es-bundle": [
"./src/index.js",
],
},
output: {
library: "SwaggerUIBundle",
libraryTarget: "commonjs2",
},
plugins: [
new DuplicatesPlugin({
// emit compilation warning or error? (Default: `false`)
emitErrors: false,
// display full duplicates information? (Default: `false`)
verbose: false,
}),
new WebpackBundleSizeAnalyzerPlugin("log.es-bundle-sizes.swagger-ui.txt"),
// new StatsWriterPlugin({
// filename: path.join("log.es-bundle-stats.swagger-ui.json"),
// fields: null,
// }),
]
}
)
export default result