mirror of
https://github.com/jlengrand/adyen-web.git
synced 2026-03-10 08:01:22 +00:00
refactor: split rollup config (#2222)
This commit is contained in:
Yu Long
93
packages/lib/config/rollup.base.config.js
Normal file
93
packages/lib/config/rollup.base.config.js
Normal file
@@ -0,0 +1,93 @@
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import json from '@rollup/plugin-json';
|
||||
import postcss from 'rollup-plugin-postcss';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
import eslint from '@rollup/plugin-eslint';
|
||||
import stylelint from 'rollup-plugin-stylelint';
|
||||
import pkg from '../package.json';
|
||||
import path from 'path';
|
||||
const currentVersion = require('./version')();
|
||||
require('dotenv').config({ path: path.resolve('../../', '.env') });
|
||||
|
||||
const isBundleAnalyzer = process.env.NODE_ENV === 'analyze';
|
||||
|
||||
if (process.env.CI !== 'true') {
|
||||
console.warn(
|
||||
'\x1b[33m%s\x1b[0m',
|
||||
'Warning: Building custom bundle. We recommend using one of the official builds served by our servers or NPM. Check https://docs.adyen.com/checkout for more information.'
|
||||
);
|
||||
}
|
||||
|
||||
export const input = 'src/index.ts';
|
||||
|
||||
export const watchConfig = {
|
||||
chokidar: {
|
||||
usePolling: true,
|
||||
useFsEvents: false,
|
||||
interval: 500
|
||||
},
|
||||
exclude: 'node_modules/**'
|
||||
};
|
||||
|
||||
export const extensions = ['.js', '.jsx', '.ts', '.tsx'];
|
||||
|
||||
export const polyfillPlugin = [
|
||||
'@babel/plugin-transform-runtime',
|
||||
{
|
||||
corejs: 3,
|
||||
absoluteRuntime: false
|
||||
}
|
||||
];
|
||||
|
||||
export const polyfillPreset = [
|
||||
'@babel/preset-env',
|
||||
{
|
||||
useBuiltIns: false
|
||||
}
|
||||
];
|
||||
|
||||
export async function getPlugins(analyze = isBundleAnalyzer) {
|
||||
return [
|
||||
resolve({ extensions }),
|
||||
commonjs(),
|
||||
stylelint({ include: 'src/**/*.scss' }),
|
||||
eslint({
|
||||
include: ['./src/**'],
|
||||
exclude: ['./src/**/*.json', './src/**/*.scss']
|
||||
}),
|
||||
replace({
|
||||
values: {
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||
'process.env.VERSION': JSON.stringify(currentVersion.ADYEN_WEB_VERSION),
|
||||
'process.env.COMMIT_HASH': JSON.stringify(currentVersion.COMMIT_HASH),
|
||||
'process.env.COMMIT_BRANCH': JSON.stringify(currentVersion.COMMIT_BRANCH),
|
||||
'process.env.ADYEN_BUILD_ID': JSON.stringify(currentVersion.ADYEN_BUILD_ID),
|
||||
'process.env.__SF_ENV__': JSON.stringify(process.env.SF_ENV || 'build')
|
||||
},
|
||||
preventAssignment: true
|
||||
}),
|
||||
json({ namedExports: false, compact: true, preferConst: true }),
|
||||
postcss({
|
||||
use: ['sass'],
|
||||
config: {
|
||||
path: 'config/postcss.config.js'
|
||||
},
|
||||
sourceMap: true,
|
||||
inject: false,
|
||||
extract: 'adyen.css'
|
||||
}),
|
||||
analyze &&
|
||||
(await import('rollup-plugin-visualizer')).default({
|
||||
title: 'Adyen Web bundle visualizer',
|
||||
gzipSize: true
|
||||
})
|
||||
];
|
||||
}
|
||||
|
||||
export function getExternals() {
|
||||
const peerDeps = Object.keys(pkg.peerDependencies || {});
|
||||
const dependencies = Object.keys(pkg.dependencies || {});
|
||||
|
||||
return [/@babel\/runtime/, ...peerDeps, ...dependencies];
|
||||
}
|
||||
@@ -1,79 +1,16 @@
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import json from '@rollup/plugin-json';
|
||||
import postcss from 'rollup-plugin-postcss';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
import eslint from '@rollup/plugin-eslint';
|
||||
import babel from '@rollup/plugin-babel';
|
||||
import stylelint from 'rollup-plugin-stylelint';
|
||||
import { terserConfig, modernTerserConfig } from './terser.config';
|
||||
import { modernTerserConfig, terserConfig } from './terser.config';
|
||||
import pkg from '../package.json';
|
||||
|
||||
const currentVersion = require('./version')();
|
||||
import path from 'path';
|
||||
import { extensions, getExternals, getPlugins, input, polyfillPlugin, polyfillPreset, watchConfig } from './rollup.base.config';
|
||||
|
||||
require('dotenv').config({ path: path.resolve('../../', '.env') });
|
||||
|
||||
if (process.env.CI !== 'true') {
|
||||
console.warn(
|
||||
'\x1b[33m%s\x1b[0m',
|
||||
'Warning: Building custom bundle. We recommend using one of the official builds served by our servers or NPM. Check https://docs.adyen.com/checkout for more information.'
|
||||
);
|
||||
}
|
||||
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
const isBundleAnalyzer = process.env.NODE_ENV === 'analyze';
|
||||
|
||||
const input = 'src/index.ts';
|
||||
const watchConfig = {
|
||||
chokidar: {
|
||||
usePolling: true,
|
||||
useFsEvents: false,
|
||||
interval: 500
|
||||
},
|
||||
exclude: 'node_modules/**'
|
||||
};
|
||||
|
||||
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
|
||||
|
||||
const polyfillPlugin = [
|
||||
'@babel/plugin-transform-runtime',
|
||||
{
|
||||
corejs: 3,
|
||||
absoluteRuntime: false
|
||||
}
|
||||
];
|
||||
|
||||
const polyfillPreset = [
|
||||
'@babel/preset-env',
|
||||
{
|
||||
useBuiltIns: false
|
||||
}
|
||||
];
|
||||
|
||||
async function getPlugins({ compress, analyze, version, modern }) {
|
||||
async function getProdPlugins({ modern }) {
|
||||
const babelPlugins = modern ? [] : [polyfillPlugin];
|
||||
const babelPreset = modern ? [] : [polyfillPreset];
|
||||
const sharedPlugins = await getPlugins();
|
||||
|
||||
return [
|
||||
resolve({ extensions }),
|
||||
commonjs(),
|
||||
stylelint({ include: 'src/**/*.scss' }),
|
||||
eslint({
|
||||
include: ['./src/**'],
|
||||
exclude: ['./src/**/*.json', './src/**/*.scss']
|
||||
}),
|
||||
replace({
|
||||
values: {
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||
'process.env.VERSION': JSON.stringify(version.ADYEN_WEB_VERSION),
|
||||
'process.env.COMMIT_HASH': JSON.stringify(version.COMMIT_HASH),
|
||||
'process.env.COMMIT_BRANCH': JSON.stringify(version.COMMIT_BRANCH),
|
||||
'process.env.ADYEN_BUILD_ID': JSON.stringify(version.ADYEN_BUILD_ID),
|
||||
'process.env.__SF_ENV__': JSON.stringify(process.env.SF_ENV || 'build')
|
||||
},
|
||||
preventAssignment: true
|
||||
}),
|
||||
...sharedPlugins,
|
||||
babel({
|
||||
configFile: path.resolve(__dirname, '..', 'babel.config.json'),
|
||||
extensions,
|
||||
@@ -83,48 +20,20 @@ async function getPlugins({ compress, analyze, version, modern }) {
|
||||
plugins: babelPlugins,
|
||||
presets: babelPreset
|
||||
}),
|
||||
json({ namedExports: false, compact: true, preferConst: true }),
|
||||
postcss({
|
||||
use: ['sass'],
|
||||
config: {
|
||||
path: 'config/postcss.config.js'
|
||||
},
|
||||
sourceMap: true,
|
||||
inject: false,
|
||||
extract: 'adyen.css'
|
||||
}),
|
||||
compress && (await import('rollup-plugin-terser')).terser(modern ? modernTerserConfig : terserConfig),
|
||||
analyze &&
|
||||
(await import('rollup-plugin-visualizer')).default({
|
||||
title: 'Adyen Web bundle visualizer',
|
||||
gzipSize: true
|
||||
})
|
||||
(await import('rollup-plugin-terser')).terser(modern ? modernTerserConfig : terserConfig)
|
||||
];
|
||||
}
|
||||
|
||||
function getExternals() {
|
||||
const peerDeps = Object.keys(pkg.peerDependencies || {});
|
||||
const dependencies = Object.keys(pkg.dependencies || {});
|
||||
|
||||
return [/@babel\/runtime/, ...peerDeps, ...dependencies];
|
||||
}
|
||||
|
||||
export default async () => {
|
||||
const plugins = await getPlugins({
|
||||
compress: isProduction,
|
||||
analyze: isBundleAnalyzer,
|
||||
version: currentVersion,
|
||||
const plugins = await getProdPlugins({
|
||||
modern: false
|
||||
});
|
||||
|
||||
const modernPlugins = await getPlugins({
|
||||
compress: isProduction,
|
||||
analyze: isBundleAnalyzer,
|
||||
version: currentVersion,
|
||||
const modernPlugins = await getProdPlugins({
|
||||
modern: true
|
||||
});
|
||||
|
||||
const build = [
|
||||
return [
|
||||
{
|
||||
input,
|
||||
external: getExternals(),
|
||||
@@ -133,8 +42,7 @@ export default async () => {
|
||||
{
|
||||
dir: 'dist/es',
|
||||
format: 'es',
|
||||
chunkFileNames: '[name].js',
|
||||
...(!isProduction ? { sourcemap: true } : {})
|
||||
chunkFileNames: '[name].js'
|
||||
},
|
||||
{
|
||||
dir: 'dist/cjs',
|
||||
@@ -144,12 +52,8 @@ export default async () => {
|
||||
}
|
||||
],
|
||||
watch: watchConfig
|
||||
}
|
||||
];
|
||||
|
||||
// only add modern build and umd when building in production
|
||||
if (isProduction) {
|
||||
build.push({
|
||||
},
|
||||
{
|
||||
input,
|
||||
external: getExternals(),
|
||||
plugins: modernPlugins,
|
||||
@@ -157,13 +61,12 @@ export default async () => {
|
||||
{
|
||||
dir: 'dist/es.modern',
|
||||
format: 'esm',
|
||||
chunkFileNames: '[name].js',
|
||||
...(!isProduction ? { sourcemap: true } : {})
|
||||
chunkFileNames: '[name].js'
|
||||
}
|
||||
],
|
||||
watch: watchConfig
|
||||
});
|
||||
build.push({
|
||||
},
|
||||
{
|
||||
input,
|
||||
plugins,
|
||||
output: {
|
||||
@@ -174,7 +77,6 @@ export default async () => {
|
||||
sourcemap: true
|
||||
},
|
||||
watch: watchConfig
|
||||
});
|
||||
}
|
||||
return build;
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
47
packages/lib/config/rollup.dev.config.js
Normal file
47
packages/lib/config/rollup.dev.config.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import babel from '@rollup/plugin-babel';
|
||||
import path from 'path';
|
||||
import { extensions, getExternals, getPlugins, input, polyfillPlugin, polyfillPreset, watchConfig } from './rollup.base.config';
|
||||
|
||||
async function getDevPlugins() {
|
||||
const sharedPlugins = await getPlugins();
|
||||
|
||||
return [
|
||||
...sharedPlugins,
|
||||
babel({
|
||||
configFile: path.resolve(__dirname, '..', 'babel.config.json'),
|
||||
extensions,
|
||||
exclude: ['node_modules/**', '**/*.test.*'],
|
||||
ignore: [/core-js/, /@babel\/runtime/],
|
||||
babelHelpers: 'runtime',
|
||||
plugins: [polyfillPlugin],
|
||||
presets: [polyfillPreset]
|
||||
})
|
||||
];
|
||||
}
|
||||
|
||||
export default async () => {
|
||||
const plugins = await getDevPlugins();
|
||||
|
||||
return [
|
||||
{
|
||||
input,
|
||||
external: getExternals(),
|
||||
plugins,
|
||||
output: [
|
||||
{
|
||||
dir: 'dist/es',
|
||||
format: 'es',
|
||||
chunkFileNames: '[name].js',
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
dir: 'dist/cjs',
|
||||
format: 'cjs',
|
||||
exports: 'auto',
|
||||
inlineDynamicImports: true
|
||||
}
|
||||
],
|
||||
watch: watchConfig
|
||||
}
|
||||
];
|
||||
};
|
||||
@@ -33,9 +33,9 @@
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run dev-server",
|
||||
"dev-server": "cross-env NODE_ENV=development rollup --watch --config config/rollup.config.js",
|
||||
"dev-server": "cross-env rollup --watch --config config/rollup.dev.config.js",
|
||||
"docs:generate": "typedoc --out docs src --exclude \"**/*+(index|.test).ts\"",
|
||||
"build": "rm -rf dist/ && npm run type-check-generate && cross-env NODE_ENV=production rollup --config config/rollup.config.js",
|
||||
"build": "rm -rf dist/ && npm run type-check-generate && cross-env rollup --config config/rollup.config.js",
|
||||
"build:analyze": "rm -rf dist/ && cross-env NODE_ENV=analyze rollup --config config/rollup.config.js",
|
||||
"test": "jest --config config/jest.config.js",
|
||||
"test:watch": "npm run test -- --watchAll",
|
||||
|
||||
Reference in New Issue
Block a user