refactoring

build/examples/build.js

@@ -1,6 +1,6 @@
 import ora from 'ora'
 import webpack from 'webpack'
-import config from './webpack.package.config'
+import config from './webpack.config'
 
 const spinner = ora('Building …')
 

build/examples/paths.js

@@ -0,0 +1,6 @@
+import path from 'path'
+
+export const rootPath = path.resolve(__dirname, '../')
+export const srcPath = path.resolve(rootPath, '../examples')
+export const buildPath = path.resolve(rootPath, '../docs')
+export const sassImportPath = srcPath

build/examples/server.js

@@ -4,7 +4,7 @@ import webpack from 'webpack'
 import httpProxyMiddleware from 'http-proxy-middleware'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
-import config from './webpack.examples.config'
+import config from './webpack.config'
 import { sassImport } from './utilities'
 import { srcPath, sassImportPath } from './paths'
 

build/examples/webpack.config.js

@@ -9,7 +9,7 @@ import ImageminWebpackPlugin from 'imagemin-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
 import { ifDev, ifProd, removeEmpty } from './utilities'
-import { rootPath, examplesSrcPath, examplesBuildPath } from './paths'
+import { rootPath, srcPath, buildPath } from './paths'
 
 export default {
 
@@ -18,13 +18,13 @@ export default {
 	entry: {
 		examples: removeEmpty([
 			ifDev('webpack-hot-middleware/client?reload=true'),
-			`${examplesSrcPath}/assets/sass/main.scss`,
+			`${srcPath}/assets/sass/main.scss`,
-			`${examplesSrcPath}/main.js`,
+			`${srcPath}/main.js`,
 		]),
 	},
 
 	output: {
-		path: `${examplesBuildPath}/`,
+		path: `${buildPath}/`,
 		filename: `assets/js/[name]${ifProd('.[hash]', '')}.js`,
 		chunkFilename: `assets/js/[name]${ifProd('.[chunkhash]', '')}.js`,
 		publicPath: '/',
@@ -36,15 +36,15 @@ export default {
 			vue$: 'vue/dist/vue.esm.js',
 			modernizr: path.resolve(rootPath, '../.modernizr'),
 			modules: path.resolve(rootPath, '../node_modules'),
-			images: `${examplesSrcPath}/assets/images`,
+			images: `${srcPath}/assets/images`,
-			fonts: `${examplesSrcPath}/assets/fonts`,
+			fonts: `${srcPath}/assets/fonts`,
-			variables: `${examplesSrcPath}/assets/sass/variables`,
+			variables: `${srcPath}/assets/sass/variables`,
-			settings: `${examplesSrcPath}/assets/sass/1-settings/index`,
+			settings: `${srcPath}/assets/sass/1-settings/index`,
-			utilityFunctions: `${examplesSrcPath}/assets/sass/2-utility-functions/index`,
+			utilityFunctions: `${srcPath}/assets/sass/2-utility-functions/index`,
 			tiptap: path.resolve(rootPath, '../src'),
 		},
 		modules: [
-			examplesSrcPath,
+			srcPath,
 			path.resolve(rootPath, '../node_modules'),
 		],
 	},
@@ -132,9 +132,9 @@ export default {
 		// copy static files
 		new CopyWebpackPlugin([
 			{
-				context: `${examplesSrcPath}/assets/static`,
+				context: `${srcPath}/assets/static`,
 				from: { glob: '**/*', dot: false },
-				to: `${examplesBuildPath}/assets`,
+				to: `${buildPath}/assets`,
 			},
 		]),
 
@@ -144,7 +144,7 @@ export default {
 		// html
 		new HtmlWebpackPlugin({
 			filename: 'index.html',
-			template: `${examplesSrcPath}/index.html`,
+			template: `${srcPath}/index.html`,
 			inject: true,
 			minify: ifProd({
 				removeComments: true,

build/package/rollup.config.js

@@ -0,0 +1,26 @@
+import vue from 'rollup-plugin-vue'
+import buble from 'rollup-plugin-buble'
+import cjs from 'rollup-plugin-commonjs'
+import resolve from 'rollup-plugin-node-resolve'
+
+export default {
+	input: 'src/index.js',
+	output: {
+		name: 'tiptap',
+		exports: 'named',
+		format: 'cjs',
+		file: 'dist/tiptap.min.js',
+	},
+	sourcemap: true,
+	plugins: [
+		vue({
+			css: true,
+			compileTemplate: true,
+		}),
+		cjs(),
+		buble({
+			objectAssign: 'Object.assign',
+		}),
+		resolve(),
+	],
+}

package.json

@@ -13,10 +13,9 @@
     "url": "git+https://github.com/heyscrumpy/tiptap.git"
   },
   "scripts": {
-    "r": "rollup -c",
+    "start": "./node_modules/@babel/node/bin/babel-node.js build/examples/server.js --env=development",
-    "start": "./node_modules/@babel/node/bin/babel-node.js webpack/server.js --env=development",
+    "build:package": "rollup --config build/package/rollup.config.js",
-    "build:package": "./node_modules/@babel/node/bin/babel-node.js webpack/build.package.js --env=production",
+    "build:examples": "./node_modules/@babel/node/bin/babel-node.js build/examples/build.js --env=production"
-    "build:examples": "./node_modules/@babel/node/bin/babel-node.js webpack/build.examples.js --env=production"
   },
   "babel": {
     "presets": [

rollup.config.js

@@ -1,43 +0,0 @@
-import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
-import buble from 'rollup-plugin-buble'; // Transpile/polyfill with reasonable browser support
-import cjs from 'rollup-plugin-commonjs'
-import resolve from 'rollup-plugin-node-resolve'
-export default {
-    input: 'src/index.js', // Path relative to package.json
-    // output: {
-    //     name: 'MyComponent',
-    //     exports: 'named',
-		// },
-		output: {format: "cjs", file: "dist/tiptap.min.js"},
-		sourcemap: true,
-    plugins: [
-        vue({
-          css: true,
-          compileTemplate: true,
-				}),
-				cjs(),
-				buble({
-					objectAssign: 'Object.assign',
-				}),
-				resolve(),
-		],
-};
-
-// module.exports = {
-//   input: "./src/index.js",
-//   output: {format: "cjs", file: "dist/tiptap.min.js"},
-//   sourcemap: true,
-//   plugins: [
-// 		// require("rollup-plugin-buble")(),
-// 		// require('rollup-plugin-commonjs')(),
-// 		require('rollup-plugin-babel')({
-// 			babelrc: false,
-// 			presets: [['@babel/preset-env', { modules: false }]]
-// 		}),
-// 		require('rollup-plugin-node-resolve')()
-// 	],
-// 	buble: {
-//     objectAssign: 'Object.assign'
-//   },
-//   external(id) { return !/^[\.\/]/.test(id) }
-// }

webpack/build.examples.js

@@ -1,24 +0,0 @@
-import ora from 'ora'
-import webpack from 'webpack'
-import config from './webpack.examples.config'
-
-const spinner = ora('Building …')
-
-export default new Promise((resolve, reject) => {
-	spinner.start()
-
-	webpack(config, (error, stats) => {
-		if (error) {
-			return reject(error)
-		}
-
-		if (stats.hasErrors()) {
-			process.stdout.write(stats.toString() + "\n");
-			return reject(new Error('Build failed with errors.'))
-		}
-
-		return resolve('Build complete.')
-	})
-})
-.then(success => spinner.succeed(success))
-.catch(error => spinner.fail(error))

webpack/paths.js

@@ -1,8 +0,0 @@
-import path from 'path'
-
-export const rootPath = __dirname
-export const srcPath = path.resolve(rootPath, '../src')
-export const buildPath = path.resolve(rootPath, '../dist')
-export const examplesSrcPath = path.resolve(rootPath, '../examples')
-export const examplesBuildPath = path.resolve(rootPath, '../docs')
-export const sassImportPath = examplesSrcPath

webpack/webpack.package.config.js

@@ -1,63 +0,0 @@
-import path from 'path'
-import { VueLoaderPlugin } from 'vue-loader'
-import { ifDev, removeEmpty } from './utilities'
-import { rootPath, srcPath, buildPath } from './paths'
-
-export default {
-
-	mode: ifDev('development', 'production'),
-
-	entry: {
-		tiptap: removeEmpty([
-			ifDev('webpack-hot-middleware/client?reload=true'),
-			`${srcPath}/index.js`,
-		]),
-	},
-
-	output: {
-		path: `${buildPath}/`,
-		filename: '[name].min.js',
-		publicPath: '/',
-	},
-
-	resolve: {
-		extensions: ['.js', '.scss', '.vue'],
-		alias: {
-			vue$: 'vue/dist/vue.esm.js',
-			tiptap: path.resolve(rootPath, '../src'),
-		},
-		modules: [
-			srcPath,
-			path.resolve(rootPath, '../node_modules'),
-		],
-	},
-
-	devtool: ifDev('eval-source-map', 'source-map'),
-
-	module: {
-		rules: [
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader',
-			},
-			{
-				test: /\.js$/,
-				loader: ifDev('babel-loader?cacheDirectory=true', 'babel-loader'),
-				exclude: /node_modules/,
-			},
-		],
-	},
-
-	externals: {
-    vue: 'vue',
-  },
-
-	plugins: removeEmpty([
-		new VueLoaderPlugin(),
-	]),
-
-	node: {
-		fs: 'empty',
-	},
-
-}