Use Rollup for UMD and ES6 builds.

This commit is contained in:
Don McCurdy 2018-01-20 00:01:41 -08:00
parent 14dd9a9f22
commit 1cf95b490f
9 changed files with 115 additions and 155 deletions

7
.babelrc Normal file
View File

@ -0,0 +1,7 @@
{
"presets": [
["env", {
"modules": false
}]
]
}

View File

@ -10,7 +10,3 @@
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
import dat from './src/dat/index';
export default dat;

View File

@ -2,39 +2,16 @@
"name": "dat.gui",
"version": "0.6.5",
"description": "A lightweight graphical user interface for changing variables in JavaScript.",
"main": "index.js",
"main": "build/dat.gui.js",
"module": "build/dat.gui.module.js",
"directories": {
"test": "tests"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
],
[
"stringify",
{
"extensions": [
".html"
]
}
],
[
"sassify"
]
]
},
"scripts": {
"dev": "webpack --progress --colors --watch --config webpack/webpack.config.js --devtool sourcemap",
"build": "npm run build-js && npm run build-css",
"build-js": "webpack --config ./webpack/webpack.config.js --devtool sourcemap && webpack --config ./webpack/webpack.config.min.js",
"build-css": "node-sass src/dat/gui/style.scss build/dat.gui.css",
"dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c -w -m inline\" \"serve --port 8080\"",
"build": "rollup -c && rollup -c rollup.config.min.js",
"build-docs": "jsdoc2md -f src/dat/gui/GUI.js src/dat/controllers/Controller.js src/dat/controllers/NumberController.js | replace-between --target API.md --token API",
"lint": "eslint src",
"postversion": "git push && git push --tags && npm publish"
},
"repository": {
@ -48,28 +25,25 @@
},
"homepage": "https://github.com/dataarts/dat.gui#readme",
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.25.0",
"babel-core": "^6.26.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.6.1",
"concurrently": "^3.5.1",
"eslint": "^3.5.0",
"eslint-config-airbnb-base": "^7.1.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-import": "^1.15.0",
"extend": "^3.0.0",
"html-loader": "^0.4.4",
"jsdoc-to-markdown": "^3.0.2",
"node-sass": "^3.10.0",
"replace-between": "0.0.8",
"sass-loader": "^4.0.2",
"webpack": "1.14.x"
},
"dependencies": {
"babel-preset-es2015": "^6.14.0",
"babelify": "^7.3.0",
"sassify": "^4.0.0",
"stringify": "^5.1.0"
"rollup": "^0.54.1",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-cleanup": "^2.0.0",
"rollup-plugin-node-resolve": "^3.0.2",
"rollup-plugin-sass": "^0.5.3",
"rollup-plugin-uglify": "^2.0.1",
"serve": "^6.4.8"
},
"eslintConfig": {
"extends": "airbnb-base",

47
rollup.config.js Normal file
View File

@ -0,0 +1,47 @@
/**
* dat-gui JavaScript Controller Library
* http://code.google.com/p/dat-gui
*
* Copyright 2011 Data Arts Team, Google Creative Lab
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
import fs from 'fs';
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';
import cleanup from 'rollup-plugin-cleanup';
import babel from 'rollup-plugin-babel';
import sass from 'rollup-plugin-sass';
const banner = fs.readFileSync(path.join(__dirname, 'licenseBanner.txt'));
export default {
input: 'src/dat/index.js',
output: [{
file: './build/dat.gui.js',
format: 'umd',
name: 'dat',
banner: banner
}, {
file: './build/dat.gui.module.js',
format: 'es',
banner: banner
}],
watch: {
include: 'src/**'
},
plugins: [
resolve(),
sass({options: {outputStyle: 'compressed'}}),
babel({
plugins: ['external-helpers'],
exclude: 'node_modules/**'
}),
cleanup()
]
};

36
rollup.config.min.js vendored Normal file
View File

@ -0,0 +1,36 @@
/**
* dat-gui JavaScript Controller Library
* http://code.google.com/p/dat-gui
*
* Copyright 2011 Data Arts Team, Google Creative Lab
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
import fs from 'fs';
import path from 'path';
import defaultConfig from './rollup.config';
import uglify from 'rollup-plugin-uglify';
const banner = fs.readFileSync(path.join(__dirname, 'licenseBanner.txt'));
export default Object.assign({}, defaultConfig, {
output: {
file: './build/dat.gui.min.js',
format: 'umd',
name: 'dat',
banner: banner
},
plugins: [...defaultConfig.plugins, uglify({
output: {
// Preserve license commenting in minified build.
comments: function(node, comment) {
return comment.type === 'comment2';
}
}
})]
});

View File

@ -1,4 +1,4 @@
<div id="dg-save" class="dg dialogue">
const saveDialogContents = `<div id="dg-save" class="dg dialogue">
Here's the new load parameter for your <code>GUI</code>'s constructor:
@ -18,4 +18,6 @@
</div>
</div>
</div>`;
export default saveDialogContents;

View File

@ -11,7 +11,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*/
module.exports = {
const css = {
load: function(url, indoc) {
const doc = indoc || document;
const link = doc.createElement('link');
@ -21,11 +21,11 @@ module.exports = {
doc.getElementsByTagName('head')[0].appendChild(link);
},
inject: function(css, indoc) {
inject: function(cssContent, indoc) {
const doc = indoc || document;
const injected = document.createElement('style');
injected.type = 'text/css';
injected.innerHTML = css;
injected.innerHTML = cssContent;
const head = doc.getElementsByTagName('head')[0];
try {
head.appendChild(injected);
@ -33,3 +33,5 @@ module.exports = {
}
}
};
export default css;

View File

@ -1,73 +0,0 @@
/**
* dat-gui JavaScript Controller Library
* http://code.google.com/p/dat-gui
*
* Copyright 2011 Data Arts Team, Google Creative Lab
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
var path = require("path");
module.exports = {
target: 'web',
context: path.resolve(__dirname, '..', 'src'),
entry: {
main: '../index',
},
module: {
preLoaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'eslint-loader'
},
],
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /(node_modules|bower_components)/,
query: {
presets: [["es2015", {"loose": true}], "stage-0"],
plugins: ["add-module-exports"]
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.scss$/,
loader: 'css-loader!sass-loader'
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
output: {
path: path.join(__dirname, '..', 'build'),
filename: 'dat.gui.js',
library: ['dat'],
libraryTarget: 'umd'
}
};

View File

@ -1,31 +0,0 @@
/**
* dat-gui JavaScript Controller Library
* http://code.google.com/p/dat-gui
*
* Copyright 2011 Data Arts Team, Google Creative Lab
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
var extend = require('extend'),
webpack = require('webpack'),
webpackConfig = require('./webpack.config');
var config = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: true,
comments: false
})
],
output: {
filename: 'dat.gui.min.js'
}
}
module.exports = extend(true, webpackConfig, config);