Merge pull request #267 from FormidableLabs/task/simplify-contribution-process

Simplify contribution process. Integrate inspectpack fixtures.

Author: parkerziegler

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "formidable/configurations/es6-node",
+  "rules": {
+    "func-style": "off",
+    "arrow-parens": ["error", "as-needed"]
+  }
+}

.eslintrc.json

@@ -1,11 +1,12 @@
 # dependencies
-node_modules
+/node_modules/
 
 # misc
 .DS_Store
 npm-debug.log*
 .nyc_output
 .coverage
-.lankrc*
 yarn-error.log
 package-lock.json
+dist-*
+.vscode

.gitignore

@@ -94,6 +94,33 @@ Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like
 
 *Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. `new DashboardPlugin(dashboard.setData)`*
 
+### Local Development
+
+We've standardized our local development process for `webpack-dashboard` on using `yarn`. We recommend using `yarn 1.10.x+`, as these versions include the `integrity` checksum. The checksum helps to verify the integrity of an installed package before its code is executed. 🚀
+
+To run this repo locally against our provided examples, take the usual steps.
+
+```sh
+yarn
+yarn dev
+```
+
+We re-use a small handful of the fixtures from [`inspectpack`](https://github.com/FormidableLabs/inspectpack) so that you can work locally on the dashboard while simulating common `node_modules` dependency issues you might face in the wild. These live in `/examples`.
+
+To change the example you're working against, simply alter the `EXAMPLE` env variable in the `dev` script in `package.json` to match the scenario you want to run in `/examples`. For example, if you want to run the `tree-shaking` example, change the `dev` script from this:
+
+```sh
+cross-env EXAMPLE=duplicates-esm node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch
+```
+
+to this:
+
+```sh
+cross-env EXAMPLE=tree-shaking node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch
+```
+
+Then just run `yarn dev` to get up and running. PRs are very much appreciated!
+
 #### Credits
 
 Module output deeply inspired by: [https://github.com/robertknight/webpack-bundle-size-analyzer](https://github.com/robertknight/webpack-bundle-size-analyzer)

README.md

@@ -13,7 +13,7 @@ const program = new commander.Command("webpack-dashboard");
 const pkg = require("../package.json");
 
 // Wrap up side effects in a script.
-const main = module.exports = opts => { // eslint-disable-line max-statements
+const main = module.exports = opts => { // eslint-disable-line max-statements, complexity
   opts = opts || {};
   const argv = typeof opts.argv === "undefined" ? process.argv : opts.argv;
 

bin/webpack-dashboard.js

@@ -0,0 +1,5 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}

examples/.eslintrc.json

@@ -0,0 +1,34 @@
+const { resolve } = require("path");
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const { DuplicatesPlugin } = require("inspectpack/plugin");
+const Dashboard = require("../../plugin");
+
+// Specify the directory of the example we're working with
+const cwd = `${process.cwd()}/examples/${process.env.EXAMPLE}`;
+if (!process.env.EXAMPLE) {
+  throw new Error("EXAMPLE is required");
+}
+
+module.exports = {
+  mode: "development",
+  devtool: false,
+  context: resolve(cwd),
+  entry: {
+    bundle: "./src/index.js"
+  },
+  output: {
+    path: resolve(cwd, "dist-development-4"),
+    pathinfo: true,
+    filename: "[name].js"
+  },
+  plugins: [
+    new StatsWriterPlugin({
+      fields: ["assets", "modules"]
+    }),
+    new DuplicatesPlugin({
+      verbose: true,
+      emitErrors: false
+    }),
+    new Dashboard()
+  ]
+};