mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-16 12:14:14 +02:00
Switch to using Rollup for bundling (#1568)
* Implement first working rollup config for main slate pkg * Convert slate-base64-serializer to rollup * Convert slate-dev-logger to rollup * Convert slate-html-serializer to rollup * Convert slate-hyperscript to rollup * Convert slate-plain-serializer to rollup * Convert slate-prop-types to rollup * Convert (mostly) slate-react to rollup * Convert slate-simulator to rollup * Misc cleanup and configuration tweaks/fixes * Convert slate-schema-violations to rollup * Successful rollup build for top-level examples * Add plugin to replace process.env.NODE_ENV * Only rebuild modules and dev examples in watch mode * Enable sourcemaps for development builds * Force debug to use browser version, remove builtins plugin * Remove is-image from example It relies on node `path` and wouldn't work well in-browser anyway * Use browser version of react-dom/server * Move stray require to import * Configure examples to watch child package output * Fix tests * Remove unneeded preferBuiltins from resolve config * Use more precise files array to ensure sourcemaps aren't included * Use lodash instead of lodash.throttle It's pulled in anyway since slate-react needs slate, so using the minipackage actually causes code duplication * Improve naming/fix UMD builds, update UMD doc * Add rollup configs to linting, add a missing dep to package.json * Use longform rollup CLI flags * Add rollup-plugin-auto-external to reduce external module configuration * Combine rollup config into a unioned helper * Centralize to a single rollup configuration * Update dist structure and package field naming for PR feedback * Add comments and address PR feedback on rollup config * i.e. -> e.g. * Add some spacing to the configuration to improve readability * Add a bit more spacing * Remove umd from example Slate unpkg link
This commit is contained in:
Zach Schneider
committed by
Ian Storm Taylor
Ian Storm Taylor
parent
c044d048ad
commit
228b97ff29
105
support/rollup/examples.js
Normal file
105
support/rollup/examples.js
Normal file
@@ -0,0 +1,105 @@
|
||||
import path from 'path'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import alias from 'rollup-plugin-alias'
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import json from 'rollup-plugin-json'
|
||||
import replace from 'rollup-plugin-replace'
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import uglify from 'rollup-plugin-uglify'
|
||||
import sourcemaps from 'rollup-plugin-sourcemaps'
|
||||
import pkg from '../../package.json'
|
||||
|
||||
const environment = process.env.NODE_ENV || 'development'
|
||||
|
||||
const configurations = []
|
||||
|
||||
const output = {
|
||||
umd: pkg.umd,
|
||||
umdMin: pkg.umdMin,
|
||||
}
|
||||
|
||||
const umdConfig = {
|
||||
input: 'examples/index.js',
|
||||
output: {
|
||||
file: output.umd,
|
||||
name: 'slate-examples',
|
||||
format: 'umd',
|
||||
exports: 'named',
|
||||
sourcemap: environment === 'development',
|
||||
},
|
||||
plugins: [
|
||||
// Force rollup to use the browser variants of `debug` and `react-dom/server`
|
||||
// The main variant of `debug` relies on Node.js globals, while the main
|
||||
// variant of `react-dom/server` relies on Node.js's Stream.
|
||||
alias({
|
||||
debug: path.resolve(__dirname, 'node_modules/debug/src/browser'),
|
||||
'react-dom/server': path.resolve(__dirname, 'node_modules/react-dom/cjs/react-dom-server.browser.production.min'),
|
||||
}),
|
||||
|
||||
// Allow rollup to resolve modules that are npm dependencies
|
||||
// (by default, it can only resolve local modules).
|
||||
resolve(),
|
||||
|
||||
// Allow rollup to resolve npm dependencies that are CommonJS
|
||||
// (by default, it can only handle ES2015 syntax).
|
||||
commonjs({
|
||||
exclude: ['examples/**'],
|
||||
|
||||
// The CommonJS plugin sometimes cannot correctly identify named
|
||||
// exports of CommonJS modules, so we manually specify here to
|
||||
// hint that e.g. `import { List } from 'immutable'` is a reference
|
||||
// to a valid named export.
|
||||
namedExports: {
|
||||
'esrever': ['reverse'],
|
||||
'immutable': ['List', 'Map', 'Record', 'OrderedSet', 'Set', 'Stack', 'is'],
|
||||
'react-dom': ['findDOMNode'],
|
||||
'react-dom/server': ['renderToStaticMarkup'],
|
||||
},
|
||||
}),
|
||||
|
||||
// Convert JSON imports to ES6 modules.
|
||||
json(),
|
||||
|
||||
// Replace `process.env.NODE_ENV` with its value -- needed for
|
||||
// some modules like React to use their production variant (and
|
||||
// one place within Slate itself).
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify(environment)
|
||||
}),
|
||||
|
||||
// Use babel to transpile the result -- limit to package src
|
||||
// to prevent babel from trying to transpile npm dependencies.
|
||||
babel({
|
||||
include: ['examples/**']
|
||||
}),
|
||||
],
|
||||
// Limit rollup's file watching to example src files and the
|
||||
// built output of packages -- helps keep it from watching
|
||||
// too much and choking.
|
||||
watch: {
|
||||
include: [
|
||||
'examples/**',
|
||||
'packages/*/lib/*.es.js',
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
if (environment === 'production') {
|
||||
// Only build the minified UMD variant in production --
|
||||
// it makes each rebuild take substantially longer.
|
||||
const umdConfigMin = cloneDeep(umdConfig)
|
||||
umdConfigMin.output.file = output.umdMin
|
||||
umdConfigMin.plugins.push(uglify())
|
||||
configurations.push(umdConfigMin)
|
||||
} else {
|
||||
// In development, add the sourcemaps plugin so they
|
||||
// are emitted alongside the dist file.
|
||||
umdConfig.plugins.push(sourcemaps())
|
||||
|
||||
// Only build the unminified variant in development --
|
||||
// it serves no purpose in production.
|
||||
configurations.push(umdConfig)
|
||||
}
|
||||
|
||||
export default configurations
|
||||
161
support/rollup/factory.js
Normal file
161
support/rollup/factory.js
Normal file
@@ -0,0 +1,161 @@
|
||||
import path from 'path'
|
||||
import { startCase, cloneDeep } from 'lodash'
|
||||
import alias from 'rollup-plugin-alias'
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import replace from 'rollup-plugin-replace'
|
||||
import uglify from 'rollup-plugin-uglify'
|
||||
|
||||
const environment = process.env.NODE_ENV || 'development'
|
||||
|
||||
export default (pkg) => {
|
||||
const pkgName = pkg.name
|
||||
const output = {
|
||||
cjs: pkg.main,
|
||||
es: pkg.module,
|
||||
umd: pkg.umd,
|
||||
umdMin: pkg.umdMin,
|
||||
}
|
||||
const umdGlobals = pkg.umdGlobals
|
||||
|
||||
// Generate list of external dependencies from package.json
|
||||
let dependencies = []
|
||||
if (pkg.dependencies) {
|
||||
dependencies = dependencies.concat(Object.keys(pkg.dependencies))
|
||||
}
|
||||
if (pkg.peerDependencies) {
|
||||
dependencies = dependencies.concat(Object.keys(pkg.peerDependencies))
|
||||
}
|
||||
|
||||
// Consider a dependency external if:
|
||||
// 1. It is directly located in the package.json dependencies/peerDependencies (e.g. `react`), or
|
||||
// 2. It is part of a package.json dependency (e.g. `lodash/omit`)
|
||||
// External dependencies are expected to be present at runtime (rather than being bundled into
|
||||
// our built dist).
|
||||
const isExternalDependency = id => !!dependencies.find(dep => dep === id || id.startsWith(`${dep}/`))
|
||||
|
||||
// UMD build for browsers
|
||||
const umdConfig = {
|
||||
input: `packages/${pkgName}/src/index.js`,
|
||||
|
||||
output: {
|
||||
file: `packages/${pkgName}/${output.umd}`,
|
||||
format: 'umd',
|
||||
exports: 'named',
|
||||
|
||||
// For a package name such as `slate-react`, the UMD name
|
||||
// should be SlateReact.
|
||||
name: startCase(pkgName).replace(/ /g, ''),
|
||||
|
||||
// Some packages contain `umdGlobals` in their package.json, which
|
||||
// indicates external dependencies that should be treated as globals
|
||||
// rather than bundled into our dist, such as Immutable and React.
|
||||
globals: umdGlobals,
|
||||
},
|
||||
|
||||
// `external` tells rollup to treat the umdGlobals as external (and
|
||||
// thus skip bundling them).
|
||||
external: Object.keys(umdGlobals || {}),
|
||||
|
||||
plugins: [
|
||||
// Force rollup to use the browser variant of `debug`.
|
||||
// The main variant of `debug` relies on Node.js globals.
|
||||
alias({
|
||||
debug: path.resolve(__dirname, 'node_modules/debug/src/browser'),
|
||||
}),
|
||||
|
||||
// Allow rollup to resolve modules that are npm dependencies
|
||||
// (by default, it can only resolve local modules).
|
||||
resolve(),
|
||||
|
||||
// Allow rollup to resolve npm dependencies that are CommonJS
|
||||
// (by default, it can only handle ES2015 syntax).
|
||||
commonjs({
|
||||
exclude: [`packages/${pkgName}/src/**`],
|
||||
|
||||
// The CommonJS plugin sometimes cannot correctly identify named
|
||||
// exports of CommonJS modules, so we manually specify here to
|
||||
// hint that e.g. `import { List } from 'immutable'` is a reference
|
||||
// to a valid named export.
|
||||
namedExports: {
|
||||
'esrever': ['reverse'],
|
||||
'immutable': ['List', 'Map', 'Record', 'OrderedSet', 'Set', 'Stack', 'is'],
|
||||
'react-dom': ['findDOMNode'],
|
||||
'react-dom/server': ['renderToStaticMarkup'],
|
||||
},
|
||||
}),
|
||||
|
||||
// Replace `process.env.NODE_ENV` with its value -- needed for
|
||||
// some modules like React to use their production variant (and
|
||||
// one place within Slate itself).
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify('production')
|
||||
}),
|
||||
|
||||
// Use babel to transpile the result -- limit to package src
|
||||
// to prevent babel from trying to transpile npm dependencies.
|
||||
babel({
|
||||
include: [`packages/${pkgName}/src/**`]
|
||||
}),
|
||||
]
|
||||
}
|
||||
|
||||
// Additional UMD minified build based off of the unminified config
|
||||
const umdConfigMin = cloneDeep(umdConfig)
|
||||
umdConfigMin.output.file = `packages/${pkgName}/${output.umdMin}`
|
||||
umdConfigMin.plugins.push(uglify())
|
||||
|
||||
// CommonJS (for Node) and ES module (for bundlers) build.
|
||||
const moduleConfig = {
|
||||
input: `packages/${pkgName}/src/index.js`,
|
||||
output: [
|
||||
{
|
||||
file: `packages/${pkgName}/${output.es}`,
|
||||
format: 'es',
|
||||
sourcemap: environment === 'development',
|
||||
},
|
||||
],
|
||||
external: isExternalDependency,
|
||||
plugins: [
|
||||
// Force rollup to use the browser variant of `debug`.
|
||||
// The main variant of `debug` relies on Node.js globals.
|
||||
alias({
|
||||
debug: path.resolve(__dirname, 'node_modules/debug/src/browser'),
|
||||
}),
|
||||
|
||||
// Allow rollup to resolve modules that are npm dependencies
|
||||
// (by default, it can only resolve local modules).
|
||||
resolve(),
|
||||
|
||||
// Replace `process.env.NODE_ENV` with its value -- needed for
|
||||
// some modules like React to use their production variant (and
|
||||
// one place within Slate itself).
|
||||
replace({
|
||||
'process.env.NODE_ENV': JSON.stringify(environment)
|
||||
}),
|
||||
|
||||
// Use babel to transpile the result -- limit to package src
|
||||
// to prevent babel from trying to transpile npm dependencies.
|
||||
babel({
|
||||
include: [`packages/${pkgName}/src/**`]
|
||||
}),
|
||||
]
|
||||
}
|
||||
|
||||
const configurations = [moduleConfig]
|
||||
|
||||
if (environment === 'production') {
|
||||
// In development, we only build the ES version to
|
||||
// reduce rebuild times. In production, we add the
|
||||
// configs for the other variants here.
|
||||
moduleConfig.output.push({
|
||||
file: `packages/${pkgName}/${output.cjs}`,
|
||||
format: 'cjs',
|
||||
exports: 'named',
|
||||
})
|
||||
configurations.push(umdConfig, umdConfigMin)
|
||||
}
|
||||
|
||||
return configurations
|
||||
}
|
||||
Reference in New Issue
Block a user