feat: create basics of @wpackio/scripts

Just the helpers for webpack. A lot to do.
swashata · Sep 25, 2018 · db9f318 · db9f318
1 parent 434c93f
commit db9f318
Show file tree

Hide file tree

Showing 14 changed files with 3,051 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ## Project npm scope
 
-> `@wpw`
+> `@wpackio`
 
 ## 🚧👀This is just a preface and under development. Watch out!👀🚧
 

diff --git a/babel.config.js b/babel.config.js
@@ -7,7 +7,7 @@ module.exports = api => {
 				targets: {
 					node: '8.9.0',
 				},
-				modules: 'commonjs',
+				modules: 'cjs',
 			},
 		],
 	];

diff --git a/packages/scripts/.npmignore b/packages/scripts/.npmignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples
diff --git a/packages/scripts/PREFACE.md b/packages/scripts/PREFACE.md
@@ -0,0 +1,88 @@
+## Things it need to do
+
+-   Load project config file from cli --project-config or `wpw.project.config.js` (if present) `process.cwd`.
+-   Load environment config file from cli --server-config or `wpw.dev.config.js` (if present) from `process.cwd`.
+-   DO NOT RELY ON `process.env.NODE_ENV`. Rather set it automatically depending on cli commands.
+    -   `start` - Start browsersync sever with webpack middleware.
+    -   `build` - Compile files.
+    -   `init` - Create a `wpw.dev.config.js` through asking some questions (only if the file is not present).
+-   Also set `process.env.BABEL_ENV` so that `babel-loader` can play nice, (especially with the preset-react).
+
+## Structure `wpw.project.config.js`
+
+```js
+module.exports = {
+	// Files we need to compile, and where to put
+	files: [
+		// If this has length === 1, then single compiler
+		{
+			entry: {
+				// stuff
+			},
+			filename: '[name].js',
+			path: path.resolve(__dirname, 'dist'),
+		},
+		// If has more length, then multi-compiler
+	],
+	// Project specific config
+	// Needs react?
+	hasReact: true,
+	// Needs sass?
+	hasSass: true,
+	// Externals
+	externals: {
+		jquery: 'jQuery',
+	},
+	// Show overlay on development
+	errorOverlay: true,
+	// Auto optimization by webpack
+	// Split all common chunks with default config
+	// <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
+	// Won't hurt because we use PHP to automate loading
+	optimizeSplitChunks: true,
+	// Extra webpack config to be passed directly
+	webpackConfig: false,
+};
+```
+
+## Draft
+
+Possible `package.json`
+
+```json
+{
+	"name": "@wpw/scripts",
+	"version": "0.0.0",
+	"description": "@wpws/scripts is a single dependency for using WordPress webpack script.",
+	"main": "index.js",
+	"repository": "https://github.com/swashata/wp-webpack-script",
+	"author": "Swashata Ghosh",
+	"license": "MIT",
+	"private": false,
+	"dependencies": {
+		"@babel/core": "^7.1.0",
+		"@babel/plugin-proposal-class-properties": "^7.1.0",
+		"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+		"@babel/preset-env": "^7.1.0",
+		"@babel/preset-react": "^7.0.0",
+		"autoprefixer": "^9.1.5",
+		"babel-loader": "^8.0.2",
+		"browser-sync": "^2.24.7",
+		"clean-webpack-plugin": "^0.1.19",
+		"cross-env": "^5.2.0",
+		"css-loader": "^1.0.0",
+		"mini-css-extract-plugin": "^0.4.3",
+		"optimize-css-assets-webpack-plugin": "^5.0.1",
+		"postcss-loader": "^3.0.0",
+		"sass-loader": "^7.1.0",
+		"style-loader": "^0.23.0",
+		"uglifyjs-webpack-plugin": "^2.0.1",
+		"webpack": "^4.19.1",
+		"webpack-dev-middleware": "^3.3.0",
+		"webpack-hot-middleware": "^2.24.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
+```
diff --git a/packages/scripts/README.md b/packages/scripts/README.md
@@ -1,41 +1,39 @@
-## Draft
-
-Possible `package.json`
-
-```json
-{
-	"name": "@wpw/scripts",
-	"version": "0.0.0",
-	"description": "@wpws/scripts is a single dependency for using WordPress webpack script.",
-	"main": "index.js",
-	"repository": "https://github.com/swashata/wp-webpack-script",
-	"author": "Swashata Ghosh",
-	"license": "MIT",
-	"private": false,
-	"dependencies": {
-		"@babel/core": "^7.1.0",
-		"@babel/plugin-proposal-class-properties": "^7.1.0",
-		"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-		"@babel/preset-env": "^7.1.0",
-		"@babel/preset-react": "^7.0.0",
-		"autoprefixer": "^9.1.5",
-		"babel-loader": "^8.0.2",
-		"browser-sync": "^2.24.7",
-		"clean-webpack-plugin": "^0.1.19",
-		"cross-env": "^5.2.0",
-		"css-loader": "^1.0.0",
-		"mini-css-extract-plugin": "^0.4.3",
-		"optimize-css-assets-webpack-plugin": "^5.0.1",
-		"postcss-loader": "^3.0.0",
-		"sass-loader": "^7.1.0",
-		"style-loader": "^0.23.0",
-		"uglifyjs-webpack-plugin": "^2.0.1",
-		"webpack": "^4.19.1",
-		"webpack-dev-middleware": "^3.3.0",
-		"webpack-hot-middleware": "^2.24.0"
-	},
-	"publishConfig": {
-		"access": "public"
-	}
-}
+# `@wpw/scripts`
+
+Stub README
+
+// TODO
+> Intro
+
+## Installation
+
+If using `yarn`
+
+```bash
+yarn add @wpw/scripts
+```
+
+or with `npm`
+
+```bash
+npm i @wpw/scripts
 ```
+
+## Usage
+
+// TODO
+> Usage instruction
+
+## Configuration
+
+// TODO
+> Configuration instruction
+
+## Development
+
+This package has the same `npm scripts` as this monorepo. These should be run
+using `lerna run <script>`. More information can be found under [CONTRIBUTION.md](../../CONTRIBUTION.md).
+
+-   `build`: Use babel to build for nodejs 8.6+. Files inside `src` are compiled and put under `lib`.
+-   `prepare`: Run `build` after `yarn` and before `publish`.
+-   `watch`: Watch for changes in `src` and build in `lib`.
diff --git a/packages/scripts/babel.config.js b/packages/scripts/babel.config.js
@@ -0,0 +1 @@
+module.exports = require('../../babel.config.js');
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@wpw/scripts",
+  "version": "0.0.1",
+  "description": "Main single dependency of @wpw build tool.",
+  "keywords": [
+    "wordpress",
+    "bundler",
+    "webpack",
+    "browser-sync",
+    "wordpress-bundler"
+  ],
+  "main": "lib/index.js",
+  "repository": "https://github.com/swashata/wp-webpack-script",
+  "homepage": "https://wpack.io",
+  "author": "Swashata Ghosh &lt;swashata4u@gmail.com&gt; (https://swas.io)",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "@babel/core": "^7.1.0",
+    "autoprefixer": "^9.1.5",
+    "babel-loader": "^8.0.2",
+    "browser-sync": "^2.24.7",
+    "clean-webpack-plugin": "^0.1.19",
+    "cross-env": "^5.2.0",
+    "css-loader": "^1.0.0",
+    "mini-css-extract-plugin": "^0.4.3",
+    "node-sass": "^4.9.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.0",
+    "uglifyjs-webpack-plugin": "^2.0.1",
+    "webpack": "^4.19.1",
+    "webpack-dev-middleware": "^3.3.0",
+    "webpack-hot-middleware": "^2.24.0",
+    "webpack-merge": "^4.1.4"
+  },
+  "engines": {
+    "node": ">=8.9.0"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "babel src --out-dir lib --ignore **/__tests__",
+    "prepare": "cross-env NODE_ENV=production yarn build",
+    "watch": "babel -w src --out-dir lib --ignore **/__tests__"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/scripts/src/config/getModule.js b/packages/scripts/src/config/getModule.js
@@ -0,0 +1,67 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+const getModule = ({ hasReact = true, hasSass = true, isDev = true }) => {
+	// create the babel rules
+	const babelRules = {
+		test: /\.m?jsx?$/,
+		use: ['babel-loader'],
+		exclude: /(node_modules|bower_components)/,
+		options: {
+			presets: ['@wpw/base'],
+		},
+	};
+	if (hasReact) {
+		babelRules.presets.push('@wpw/react');
+	}
+	// Create style rules
+	const styleRules = {
+		test: /\.css$/,
+		use: [
+			isDev
+				? 'style-loader'
+				: {
+						loader: MiniCssExtractPlugin.loader,
+						options: {
+							sourceMap: true,
+						},
+				  },
+			{
+				loader: 'css-loader',
+				options: {
+					importLoaders: 1,
+					sourceMap: true,
+				},
+			},
+			'postcss-loader',
+		],
+	};
+	// If we have sass, then add the stuff
+	if (hasSass) {
+		styleRules.test = /\.(sa|sc|c)ss$/;
+		styleRules.use.push({
+			loader: 'sass-loader',
+			options: {
+				sourceMap: true,
+			},
+		});
+	}
+	// create file rules
+	const fileRules = {
+		test: /\.(woff|woff2|eot|ttf|otf|svg|png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
+		use: [
+			{
+				loader: 'file-loader',
+				options: {
+					name: 'asset-[hash].[ext]',
+					outputPath: 'assets/',
+				},
+			},
+		],
+	};
+
+	return {
+		rules: [babelRules, styleRules, fileRules],
+	};
+};
+
+export default getModule;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = require('../../babel.config.js');