Replace browserify with webpack (OctoLinker#97)

* Replace browserify with webpack * Fix watch task * Rename watch scripts * Replace custom install script with default npm behaviour * Replace custom lint script with npm script * Replace custom test script with npm script * Fix linting errors * Move build commands into package.json
apryl489 · Jun 10, 2016 · 30fb3a9 · 30fb3a9
1 parent a686314
commit 30fb3a9
Show file tree

Hide file tree

Showing 17 changed files with 72 additions and 91 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+./chrome
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,14 +10,13 @@ First off, thanks for taking the time to contribute! :tada: :+1:
 To build and run the extension follow these steps.
 
 0. Clone the repository.
-0. Run `npm run bootstrap` to setup the project and install all required dependencies.
+0. Run `npm install` to setup the project and install all required dependencies.
 0. Start hacking. If you're adding a plugin, you may be interested in seeing the commits that add these plugins:
    * [Homebrew]
    * [Ruby]
    * [Composer]
    * [Bower]
-0. To build the extension run `./scripts/build`.
-0. If installed, deactivate the OctoLinker extension.
+0. To build the extension once run `npm run build` or `npm run build:watch` during development.
 0. Load extension https://developer.chrome.com/extensions/getstarted#unpacked.
 
 [Homebrew]: https://github.com/OctoLinker/browser-extension/commit/b6df755208eae0b98e55fdf533b647b5d7bd4f8e

diff --git a/karma.conf.js b/karma.conf.js
@@ -1,27 +1,26 @@
-module.exports = function(config) {
+
+const webpackConfig = require('./webpack.config');
+webpackConfig.devtool = 'inline-source-map';
+
+module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['mocha', 'browserify', 'fixture', 'phantomjs-shim'],
+    frameworks: ['mocha', 'fixture', 'phantomjs-shim'],
     files: [
-      'lib/**/*.js',
-      'test/**/*.js',
-      'packages/**/*.js',
+      'test/main-lib.js',
+      'test/main-packages.js',
       'packages/*/fixtures/**/*.html',
     ],
     exclude: [],
     preprocessors: {
-      'lib/**/*.js': ['browserify'],
-      'test/**/*.js': ['browserify'],
-      'packages/**/*.js': ['browserify'],
+      'test/main-lib.js': ['webpack', 'sourcemap'],
+      'test/main-packages.js': ['webpack', 'sourcemap'],
       'packages/*/fixtures/**/*.html': ['html2js'],
     },
-    browserify: {
-      debug: true,
-      transform: [
-        ['babelify'],
-      ],
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true,
     },
-    babelPreprocessor: {},
     reporters: ['mocha'],
     browsers: ['PhantomJS'],
     singleRun: true,

diff --git a/lib/click-handler.js b/lib/click-handler.js
@@ -50,7 +50,7 @@ function onClick(event) {
     if (err) {
       showTooltip($target, SORRY);
 
-      return console.error(err);
+      return console.error(err); // eslint-disable-line no-console
     }
 
     showTooltip($target, RESOLVED);

diff --git a/lib/plugins/homebrew-manifest/index.js b/lib/plugins/homebrew-manifest/index.js
@@ -1,7 +1,6 @@
 import { HOMEBREW } from '../../../packages/helper-grammar-regex-collection/index.js';
 import insertLink from '../../insert-link';
 import preset from '../../pattern-preset';
-import { dirname } from 'path';
 
 export default class HomebrewManifest {
 

diff --git a/package.json b/package.json
@@ -6,12 +6,13 @@
   },
   "main": "lib/app.js",
   "scripts": {
-    "bootstrap": "./scripts/bootstrap",
-    "lint": "./scripts/lint",
-    "test": "./scripts/test",
-    "watch-test": "./scripts/test --no-single-run --auto-watch",
-    "build": "./scripts/build",
-    "watch-build": "./scripts/watch-build"
+    "postinstall": "ln -s ./scripts/hooks/pre-commit .git/hooks/pre-commit",
+    "lint": "eslint .",
+    "pretest": "npm run lint",
+    "test": "karma start",
+    "test:watch": "karma start --no-single-run --auto-watch",
+    "build": "webpack",
+    "build:watch": "webpack --watch"
   },
   "dependencies": {
     "JSONPath": "^0.11.2",
@@ -27,23 +28,25 @@
     "semver-regex": "^1.0.0"
   },
   "devDependencies": {
+    "babel-core": "^6.9.1",
     "babel-eslint": "^4.1.3",
-    "babel-preset-es2015": "^6.1.18",
-    "babelify": "^7.2.0",
-    "browserify": "^12.0.1",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
     "eslint": "^1.10.3",
     "eslint-config-airbnb": "2.1.1",
-    "karma-browserify": "^4.4.0",
+    "json-loader": "^0.5.4",
     "karma-fixture": "^0.2.5",
     "karma-html2js-preprocessor": "^0.1.0",
     "karma-mocha": "^0.2.0",
     "karma-mocha-reporter": "^1.1.1",
     "karma-phantomjs-launcher": "^0.2.1",
     "karma-phantomjs-shim": "^1.1.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
     "phantomjs": "^1.9.18",
-    "sinon": "^1.17.2",
-    "watchify": "^3.6.1"
+    "sinon": "^2.0.0-pre",
+    "webpack": "^1.13.1"
   },
   "private": true
 }
diff --git a/packages/blob-reader/test.js b/packages/blob-reader/test.js
@@ -10,7 +10,7 @@ describe('blob-reader', () => {
     let result;
 
     beforeEach(() => {
-      fixture.load(__dirname + '/fixtures/github.com/blob/89f13651df126efdb4f1e3ae40183c9fdccdb4d3.html');
+      fixture.load('/packages/blob-reader/fixtures/github.com/blob/89f13651df126efdb4f1e3ae40183c9fdccdb4d3.html');
       const reader = new BlobReader();
       reader.read().forEach((blob) => {
         result = blob;
@@ -67,7 +67,7 @@ describe('blob-reader', () => {
     let result;
 
     beforeEach(() => {
-      fixture.load(__dirname + '/fixtures/github.com/blob/89f13651df126efdb4f1e3ae40183c9fdccdb4d3.html');
+      fixture.load('/packages/blob-reader/fixtures/github.com/blob/89f13651df126efdb4f1e3ae40183c9fdccdb4d3.html');
       const reader = new BlobReader();
       reader.read().forEach((blob) => {
         result = blob;
@@ -108,7 +108,7 @@ describe('blob-reader', () => {
       let result;
 
       beforeEach(() => {
-        fixture.load(__dirname + '/fixtures/github.com/commit/b0775a93ea27ee381858ddd9fa2bb953d5b74acb_split.html');
+        fixture.load('/packages/blob-reader/fixtures/github.com/commit/b0775a93ea27ee381858ddd9fa2bb953d5b74acb_split.html');
         const reader = new BlobReader();
         reader.read().forEach((blob) => {
           result = blob;
@@ -141,7 +141,7 @@ describe('blob-reader', () => {
       let result;
 
       beforeEach(() => {
-        fixture.load(__dirname + '/fixtures/github.com/commit/b0775a93ea27ee381858ddd9fa2bb953d5b74acb_unified.html');
+        fixture.load('/packages/blob-reader/fixtures/github.com/commit/b0775a93ea27ee381858ddd9fa2bb953d5b74acb_unified.html');
         const reader = new BlobReader();
         reader.read().forEach((blob) => {
           result = blob;

diff --git a/scripts/bootstrap b/scripts/bootstrap
diff --git a/scripts/build b/scripts/build
diff --git a/scripts/hooks/pre-commit b/scripts/hooks/pre-commit
@@ -1,6 +1,4 @@
 #!/usr/bin/env bash
 set -e
 
-cd "$(dirname "$0")/../.."
-
-./scripts/lint
+npm run lint
diff --git a/scripts/lint b/scripts/lint
diff --git a/scripts/test b/scripts/test
diff --git a/scripts/watch-build b/scripts/watch-build
diff --git a/test/main-lib.js b/test/main-lib.js
@@ -0,0 +1,6 @@
+import 'babel-polyfill';
+
+const context = require.context('.', true, /.+\.test\.js?$/);
+context.keys().forEach(context);
+
+module.exports = context; // eslint-disable-line no-undef
diff --git a/test/main-packages.js b/test/main-packages.js
@@ -0,0 +1,4 @@
+const context = require.context('../packages', true, /\.?test\.js?$/);
+context.keys().forEach(context);
+
+module.exports = context; // eslint-disable-line no-undef
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,25 @@
+module.exports = {
+  entry: {
+    app: './lib/app',
+  },
+  output: {
+    path: 'chrome',
+    filename: '[name].js',
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /(node_modules)/,
+        loader: 'babel',
+        query: {
+          presets: ['es2015'],
+        },
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+      },
+    ],
+  },
+};