Skip to content

Commit

Permalink
chore: fix rollup config
Browse files Browse the repository at this point in the history
  • Loading branch information
@uetchy
uetchy committed Dec 15, 2019
1 parent b8cf51a commit 431eb97
Show file tree
Hide file tree
Showing 8 changed files with 203 additions and 101 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -2,8 +2,9 @@
"name": "vivliostyle",
"description": "Library for HTML+CSS typesetting and rich paged viewing with EPUB/Web publications support",
"scripts": {
"bootstrap": "lerna bootstrap && lerna run build --scope @vivliostyle/core",
"bootstrap": "lerna bootstrap && yarn build-dev",
"build": "lerna run build",
"build-dev": "lerna run build-dev",
"clean": "lerna run clean",
"dev": "lerna run dev --parallel",
"format": "lerna run format",
Expand Down
6 changes: 3 additions & 3 deletions packages/core/package.json
View file
Expand Up @@ -4,7 +4,7 @@
"version": "2019.11.100-pre",
"scripts": {
"build": "yarn clean && run-p build:*",
"build-dev": "NODE_ENV=development rollup -c",
"build-dev": "yarn clean && NODE_ENV=development rollup -c",
"build-documents": "./scripts/build-documents.sh",
"build:cjs": "NODE_ENV=production rollup -c",
"clean": "shx rm -rf lib/* browser .cache",
Expand Down Expand Up @@ -54,10 +54,10 @@
"webpack": "^4.40.2",
"webpack-cli": "^3.3.9"
},
"types": "lib/cjs/vivliostyle.d.ts",
"types": "lib/vivliostyle.d.ts",
"module": "lib/esm/vivliostyle.js",
"main": "lib/cjs/vivliostyle.js",
"unpkg": "lib/vivliostyle.js",
"browser": "lib/vivliostyle.js",
"author": "Vivliostyle Foundation",
"license": "AGPL-3.0",
"bugs": {
Expand Down
102 changes: 62 additions & 40 deletions packages/core/rollup.config.js
View file
@@ -1,13 +1,13 @@
import ts from "@wessberg/rollup-plugin-ts";
import { string } from "rollup-plugin-string";
import { terser } from "rollup-plugin-terser";
import babel from "rollup-plugin-babel";
import commonJS from "rollup-plugin-commonjs";
import replace from "@rollup/plugin-replace";
import nodeResolve from "rollup-plugin-node-resolve";
import pkg from "./package.json";
import sourcemaps from "rollup-plugin-sourcemaps";
import commonJS from "rollup-plugin-commonjs";
import strip from "rollup-plugin-strip";
import ts from "@wessberg/rollup-plugin-ts";
import replace from "@rollup/plugin-replace";
import babel from "rollup-plugin-babel";
import { terser } from "rollup-plugin-terser";
import pkg from "./package.json";

const input = "src/vivliostyle.ts";
const banner = `\
Expand All @@ -20,22 +20,34 @@ const banner = `\
* @preserve
*/
`;

const isDevelopment = process.env.NODE_ENV === "development";

// Plugins
const plugins = [
ts({ tsconfig: "tsconfig.json" }),
// Transpile TypeScript into JavaScript
ts({
tsconfig: (resolvedConfig) => ({
...resolvedConfig,
inlineSourceMap: isDevelopment,
}),
}),
// Replace require() statements refering non-JS resources with its contents
string({
include: ["src/resources/*", "resources/*"],
}),
// Replace conditional variable with value
replace({ VIVLIOSTYLE_DEBUG: JSON.stringify(isDevelopment) }),
// Resolve module path in node_modules according to package.json's props
nodeResolve({
mainFields: ["browser", "main"],
}),
// Grab source maps from other module's sourceMappingURLs
sourcemaps(),
// Handle 'require()', 'module.exports' statements
commonJS({
sourceMap: true,
}),
// Remove clutter
!isDevelopment
? strip({
debugger: false,
Expand All @@ -48,36 +60,14 @@ const plugins = [
],
})
: {},
// Cross-browser support
!isDevelopment ? babel() : {},
// Minimize module size
!isDevelopment ? terser() : {},
];

console.log(
plugins
.map((p) => p.name)
.filter((s) => s)
.join(" -> "),
);

function devify(name, infix = ".development") {
const [base, ext] = name.match(/^(.+)\.(.+)$/).slice(1);
return `${base}${infix}.${ext}`;
}

export default [
{
input,
output: [
{
name: "Vivliostyle",
file: pkg.unpkg,
format: "umd",
sourcemap: true,
banner,
},
],
plugins,
},
const buildStep = [
// UMD
{
input,
output: [
Expand All @@ -87,13 +77,45 @@ export default [
sourcemap: true,
banner,
},
{
file: pkg.module,
format: "es",
sourcemap: true,
banner,
},
],
plugins,
watch: {
clearScreen: false,
},
},
];

if (!isDevelopment) {
buildStep.push(
// CJS and ES Modules
{
input,
output: [
{
file: pkg.module,
format: "es",
sourcemap: true,
banner,
},
{
name: "Vivliostyle",
file: pkg.browser,
format: "umd",
sourcemap: true,
banner,
},
],
plugins,
},
);
}

// Show build pipeline
console.log(
plugins
.map((p) => p.name)
.filter((s) => s)
.join(" -> "),
);

export default buildStep;
8 changes: 4 additions & 4 deletions packages/core/tsconfig.json
View file
Expand Up @@ -16,7 +16,7 @@
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
"declaration": true /* Generates corresponding '.d.ts' file. */,
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
"sourceMap": true /* Generates corresponding '.map' file. */,
// "sourceMap": true /* Generates corresponding '.map' file. */,
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./lib" /* Redirect output structure to the directory. */,
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
Expand Down Expand Up @@ -49,15 +49,15 @@
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
// "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */

/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
// "inlineSourceMap": true /* Emit a single file with source maps instead of having a separate file. */,
// "inlineSources": true /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
Expand Down
72 changes: 31 additions & 41 deletions packages/viewer/gulpfile.js
View file
@@ -1,47 +1,41 @@
/* eslint-disable @typescript-eslint/no-var-requires */
"use strict";

const browserSync = require("browser-sync").create();
const changed = require("gulp-changed");
const sass = require("gulp-sass");
const ejs = require("gulp-ejs");
const fs = require("fs");
const gulp = require("gulp");
const path = require("path");
const KarmaServer = require("karma").Server;
const browserSync = require("browser-sync").create();
const gulp = require("gulp");
const ejs = require("gulp-ejs");
const sass = require("gulp-sass");
const notify = require("gulp-notify");
const path = require("path");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const changed = require("gulp-changed");
const plumber = require("gulp-plumber");
const packageImporter = require("node-sass-package-importer");

sass.compiler = require("node-sass");
const pkg = require("./package.json");

// Parameters
const SRC_DIR = "src";
const DEST_DIR = "lib";
const RESOURCE_MAP = {
core: { src: "../../core/lib", dest: "js", srcPattern: "vivliostyle.js" },
core: { src: "../../core/lib", dest: "js", srcPattern: "*.js" },
fonts: { src: "fonts" },
html: { src: "html", dest: ".", srcPattern: "*.ejs" },
css: { src: "scss", dest: "css", srcPattern: "*.scss" },
resources: {
coreResources: {
src: "../../core/resources",
dest: "resources",
},
};
const CORE_SRC_DIR = "../core/lib";
const VIEWER_HTML_FILENAMES = {
production: "vivliostyle-viewer.html",
const VIEWER_HTML_FILES = {
production: "index.html",
development: "vivliostyle-viewer-dev.html",
};

function getVersion(basePath) {
const { version } = JSON.parse(
fs.readFileSync(path.join(basePath, "package.json"), "utf8"),
);
return version;
}
const VERSION = getVersion(".");
const VIEWER_JS_FILES = {
production: pkg.main,
development: "js/vivliostyle-viewer-dev.js",
};
const VERSION = pkg.verison;

// Utility functions
function destDir(type) {
Expand All @@ -61,28 +55,26 @@ const srcPattern = (type) =>
function createCopyTask(type) {
const dest = destDir(type);
return gulp.task("build:" + type, function() {
console.log(srcPattern(type), dest);
return gulp
.src(srcPattern(type))
.pipe(changed(dest))
.pipe(gulp.dest(dest));
});
}
createCopyTask("core");
createCopyTask("fonts");
createCopyTask("resources");
createCopyTask("coreResources");

// HTML build
// Build HTML
function buildHtml(isDevelopment) {
return gulp
.src(srcPattern("html"))
.pipe(
ejs({
isDevelopment,
version: VERSION,
isDevelopment: isDevelopment,
viewerPath: isDevelopment
? "js/vivliostyle-viewer.dev.js"
: "js/vivliostyle-viewer.min.js",
? VIEWER_JS_FILES.development
: VIEWER_JS_FILES.production,
packageRoot: isDevelopment ? "../.." : "//unpkg.com/@vivliostyle",
}),
)
Expand All @@ -94,16 +86,16 @@ function buildHtml(isDevelopment) {
.pipe(
rename(
isDevelopment
? VIEWER_HTML_FILENAMES.development
: VIEWER_HTML_FILENAMES.production,
? VIEWER_HTML_FILES.development
: VIEWER_HTML_FILES.production,
),
)
.pipe(gulp.dest(destDir("html")));
}
gulp.task("build:html", () => buildHtml(false));
gulp.task("build:html-dev", () => buildHtml(true));

// CSS build
// Build CSS
function buildCss(isDevelopment) {
return gulp
.src(srcPattern("css"))
Expand Down Expand Up @@ -132,8 +124,7 @@ gulp.task(
"build:html",
"build:css",
"build:fonts",
"build:resources",
"build:core",
"build:coreResources",
),
);
gulp.task(
Expand All @@ -142,7 +133,7 @@ gulp.task(
"build:html-dev",
"build:css-dev",
"build:fonts",
"build:resources",
"build:coreResources",
),
);

Expand Down Expand Up @@ -177,19 +168,19 @@ gulp.task(
"watch",
gulp.series(gulp.parallel("start-watching", "build"), function(done) {
gulp.watch(srcPattern("html"), gulp.task("build:html"));
gulp.watch(srcPattern("fonts"), gulp.task("build:fonts"));
gulp.watch(srcPattern("resources"), gulp.task("build:resources"));
gulp.watch(srcPattern("css"), gulp.task("build:css"));
gulp.watch(srcPattern("fonts"), gulp.task("build:fonts"));
gulp.watch(srcPattern("coreResources"), gulp.task("build:coreResources"));
done();
}),
);
gulp.task(
"watch-dev",
gulp.series(gulp.parallel("start-watching", "build-dev"), function(done) {
gulp.watch(srcPattern("html"), gulp.task("build:html-dev"));
gulp.watch(srcPattern("fonts"), gulp.task("build:fonts"));
gulp.watch(srcPattern("resources"), gulp.task("build:resources"));
gulp.watch(srcPattern("css"), gulp.task("build:css-dev"));
gulp.watch(srcPattern("fonts"), gulp.task("build:fonts"));
gulp.watch(srcPattern("coreResources"), gulp.task("build:coreResources"));
done();
}),
);
Expand All @@ -211,7 +202,6 @@ function serve(isDevelopment) {
const target = [DEST_DIR + "/**/*"];
if (isDevelopment) {
target.push(srcPattern("core"));
target.push(CORE_SRC_DIR + "/**/*");
}
gulp.watch(target).on("change", browserSync.reload);
}
Expand Down

0 comments on commit 431eb97

Please sign in to comment.