Fix Sourcemaps (#885)

Fix sourcemaps.
2018-06-14 10:03:20 -05:00 · 2018-06-14 10:03:20 -05:00 · 8d379044ab
parent fdc86455d0
commit 8d379044ab
8 changed files with 189 additions and 119 deletions
--- a/app/lib/key_gen.rb
+++ b/app/lib/key_gen.rb
@ -5,6 +5,7 @@ class KeyGen
  PROD_KEY_FILE    = "/keys/production.pem"
  KEY_FILE         = "jwt.#{Rails.env}.pem"
  SAVE_PATH        = (Rails.env == "production") ? PROD_KEY_FILE : KEY_FILE
+  # SAVE_PATH        = KEY_FILE

  def self.try_file
    OpenSSL::PKey::RSA.new(File.read(SAVE_PATH)) if File.file?(SAVE_PATH)
--- a/config/webpack.base.js
+++ b/config/webpack.base.js
@ -1,51 +0,0 @@
-var StatsPlugin = require('stats-webpack-plugin');
-
-module.exports = function () {
-  return {
-    entry: {
-      "app_bundle": "./webpack/entry.tsx",
-      "front_page": "./webpack/front_page/index.tsx",
-      "password_reset": "./webpack/password_reset/index.tsx",
-      "tos_update": "./webpack/tos_update/index.tsx"
-    },
-    // Was "eval", but that did not go well with our CSP
-    devtool: "cheap-module-source-map",
-    module: {
-      rules: [
-        {
-          test: [/\.scss$/, /\.css$/],
-          use: ["style-loader", "css-loader", "sass-loader"]
-        },
-        {
-          test: /\.tsx?$/,
-          use: "ts-loader"
-        },
-        {
-          test: [/\.woff$/, /\.woff2$/, /\.ttf$/],
-          use: "url-loader"
-        },
-        {
-          test: [/\.eot$/, /\.svg(\?v=\d+\.\d+\.\d+)?$/],
-          use: "file-loader"
-        }
-      ]
-    },
-    // Allows imports without file extensions.
-    resolve: {
-      extensions: [".js", ".ts", ".tsx", ".css", ".scss", ".json"]
-    },
-    plugins: [
-      new StatsPlugin('manifest.json', {
-        // We only need assetsByChunkName
-        chunkModules: false,
-        source: false,
-        chunks: false,
-        modules: false,
-        assets: true
-      })
-    ],
-    node: {
-      fs: "empty"
-    }
-  };
-}
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@ -1,27 +1,68 @@
 var path = require("path");
-var genConfig = require("./webpack.base");
-var conf = genConfig();
-
+var StatsPlugin = require('stats-webpack-plugin');
+var host = process.env["API_HOST"] || "localhost"
 var devServerPort = 3808;
-const host = process.env["API_HOST"] || "localhost"

-conf.mode = "development";
-conf.output = {
-  // must match config.webpack.output_dir
-  path: path.join(__dirname, '..', 'public', 'webpack'),
-  publicPath: `//${host}:${devServerPort}/webpack/`,
-  filename: '[name].js'
-};
-
-conf.devServer = {
-  port: devServerPort,
-  disableHostCheck: true,
-  watchOptions: {
-    aggregateTimeout: 300,
-    poll: 1000
+module.exports = {
+  mode: "none",
+  output: {
+    // must match config.webpack.output_dir
+    path: path.join(__dirname, '..', 'public', 'webpack'),
+    publicPath: `//${host}:${devServerPort}/webpack/`,
+    filename: '[name].js'
  },
-  host: "0.0.0.0",
-  headers: { 'Access-Control-Allow-Origin': '*' }
+  entry: {
+    "app_bundle": "./webpack/entry.tsx",
+    "front_page": "./webpack/front_page/index.tsx",
+    "password_reset": "./webpack/password_reset/index.tsx",
+    "tos_update": "./webpack/tos_update/index.tsx"
+  },
+  devtool: "eval",
+  module: {
+    rules: [
+      {
+        test: [/\.scss$/, /\.css$/],
+        use: ["style-loader", "css-loader", "sass-loader"]
+      },
+      {
+        test: /\.tsx?$/,
+        use: "awesome-typescript-loader"
+      },
+      {
+        test: [/\.woff$/, /\.woff2$/, /\.ttf$/],
+        use: "url-loader"
+      },
+      {
+        test: [/\.eot$/, /\.svg(\?v=\d+\.\d+\.\d+)?$/],
+        use: "file-loader"
+      }
+    ]
+  },
+  // Allows imports without file extensions.
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".css", ".scss", ".json"]
+  },
+  plugins: [
+    new StatsPlugin('manifest.json', {
+      // We only need assetsByChunkName
+      chunkModules: false,
+      source: false,
+      chunks: false,
+      modules: false,
+      assets: true
+    })
+  ],
+  node: {
+    fs: "empty"
+  },
+  devServer: {
+    port: devServerPort,
+    disableHostCheck: true,
+    watchOptions: {
+      aggregateTimeout: 300,
+      poll: 1000
+    },
+    host: "0.0.0.0",
+    headers: { 'Access-Control-Allow-Origin': '*' }
+  }
 };
-
-module.exports = conf;
--- a/config/webpack.prod.js
+++ b/config/webpack.prod.js
@ -1,48 +1,90 @@
 'use strict';
 global.WEBPACK_ENV = "production";
-// var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var path = require("path");
-var genConfig = require("./webpack.base");
 var UglifyJsPlugin = require("webpack-uglify-js-plugin");
 var OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 var webpack = require("webpack");
+var StatsPlugin = require('stats-webpack-plugin');
+var publicPath = '/webpack/';

-var conf = genConfig();
-conf.mode = "production";
-
-conf.output = {
-  path: path.join(__dirname, '..', 'public', 'webpack'),
-  publicPath: '/webpack/',
-  filename: '[name]-[chunkhash].js',
-  chunkFilename: '[id].[chunkhash].js'
+var conf = {
+  mode: "none",
+  devtool: "source-map",
+  entry: {
+    "app_bundle": "./webpack/entry.tsx",
+    "front_page": "./webpack/front_page/index.tsx",
+    "password_reset": "./webpack/password_reset/index.tsx",
+    "tos_update": "./webpack/tos_update/index.tsx"
+  },
+  output: {
+    path: path.join(__dirname, '..', 'public', 'webpack'),
+    publicPath,
+    filename: '[name]-[chunkhash].js',
+    chunkFilename: '[id].[name].[chunkhash].js'
+  },
+  module: {
+    rules: [
+      {
+        test: [/\.scss$/, /\.css$/],
+        use: ["style-loader", "css-loader", "sass-loader"]
+      },
+      {
+        test: /\.tsx?$/,
+        use: "awesome-typescript-loader"
+      },
+      {
+        test: [/\.woff$/, /\.woff2$/, /\.ttf$/],
+        use: "url-loader"
+      },
+      {
+        test: [/\.eot$/, /\.svg(\?v=\d+\.\d+\.\d+)?$/],
+        use: "file-loader"
+      }
+    ]
+  },
+  // Allows imports without file extensions.
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".css", ".scss", ".json"]
+  },
+  plugins: [
+    new StatsPlugin('manifest.json', {
+      // We only need assetsByChunkName
+      chunkModules: false,
+      source: false,
+      chunks: false,
+      modules: false,
+      assets: true
+    }),
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /\.css$/g,
+      cssProcessor: require("cssnano"),
+      cssProcessorOptions: { discardComments: { removeAll: true } },
+      canPrint: true
+    }),
+    new UglifyJsPlugin({
+      cacheFolder: path.resolve(__dirname, "../public/dist/cached_uglify/"),
+      debug: true,
+      minimize: true,
+      sourceMap: true,
+      screw_ie8: true,
+      output: { comments: false },
+      compressor: { warnings: false }
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify("production")
+      }
+    })
+  ],
+  node: {
+    fs: "empty"
+  }
 };
-
-[
-  // new ExtractTextPlugin({
-  //   filename: "dist/[name].[chunkhash].css",
-  //   disable: false,
-  //   allChunks: true
-  // }),
-  new OptimizeCssAssetsPlugin({
-    assetNameRegExp: /\.css$/g,
-    cssProcessor: require("cssnano"),
-    cssProcessorOptions: { discardComments: { removeAll: true } },
-    canPrint: true
-  }),
-  new UglifyJsPlugin({
-    cacheFolder: path.resolve(__dirname, "../public/dist/cached_uglify/"),
-    debug: true,
-    minimize: true,
-    sourceMap: true,
-    screw_ie8: true,
-    output: { comments: false },
-    compressor: { warnings: false }
-  }),
-  new webpack.DefinePlugin({
-    'process.env': {
-      'NODE_ENV': JSON.stringify("production")
-    }
-  })
-].map(x => conf.plugins.push(x));
-
+var accessToken = process.env.ROLLBAR_ACCESS_TOKEN
+if (accessToken) {
+  var RollbarSourceMapPlugin = require('rollbar-sourcemap-webpack-plugin')
+  var version = process.env.BUILT_AT || process.env.HEROKU_SLUG_COMMIT || "????"
+  var plugin = new RollbarSourceMapPlugin({accessToken, version, publicPath})
+  conf.plugins.push(plugin)
+}
 module.exports = conf;
--- a/package.json
+++ b/package.json
@ -44,6 +44,7 @@
    "@types/react-dom": "16.0.5",
    "@types/react-redux": "6.0.0",
    "@types/react-router": "3.0.15",
+    "awesome-typescript-loader": "^5.0.0",
    "axios": "^0.18.0",
    "boxed_value": "^1.0.0",
    "browser-speech": "1.1.1",
@ -79,12 +80,12 @@
    "redux": "^3.7.2",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.0.1",
+    "rollbar-sourcemap-webpack-plugin": "^2.3.0",
    "sass-loader": "7.0.3",
    "stats-webpack-plugin": "0.6.2",
    "style-loader": "0.21.0",
    "ts-jest": "22.4.6",
    "ts-lint": "^4.5.1",
-    "ts-loader": "4.4.1",
    "tslint": "5.10.0",
    "typescript": "2.9.1",
    "url-loader": "1.0.1",
--- a/webpack/app.tsx
+++ b/webpack/app.tsx
@ -3,7 +3,6 @@ import { t } from "i18next";
 import { connect } from "react-redux";
 import * as _ from "lodash";
 import { init, error } from "farmbot-toastr";
-
 import { NavBar } from "./nav";
 import { Everything } from "./interfaces";
 import { LoadingPlant } from "./loading_plant";
--- a/webpack/nav/sync_button.tsx
+++ b/webpack/nav/sync_button.tsx
@ -28,6 +28,7 @@ const TEXT_MAPPING: Record<SyncStatus, string> = {
 const spinner = <span className="btn-spinner sync" />;

 export function SyncButton({ user, bot, dispatch, consistent }: NavButtonProps) {
+
  if (!user) {
    return <span></span>;
  }
--- a/yarn.lock
+++ b/yarn.lock
@ -544,7 +544,7 @@ async@^1.4.0, async@^1.5.2:
  version "1.5.2"
  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"

-async@^2.1.4:
+async@^2.1.4, async@^2.6.0:
  version "2.6.1"
  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
  dependencies:
@ -573,6 +573,18 @@ autoprefixer@^6.3.1:
    postcss "^5.2.16"
    postcss-value-parser "^3.2.3"

+awesome-typescript-loader@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-5.0.0.tgz#130c304ae52a60933f15d93f7629003b483fa8b1"
+  dependencies:
+    chalk "^2.3.1"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^1.1.0"
+    lodash "^4.17.5"
+    micromatch "^3.1.9"
+    mkdirp "^0.5.1"
+    source-map-support "^0.5.3"
+
 aws-sign2@~0.6.0:
  version "0.6.0"
  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@ -1146,7 +1158,7 @@ chalk@^1.1.1, chalk@^1.1.3:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.4.1:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
  dependencies:
@ -4281,10 +4293,18 @@ lodash.clonedeep@^4.3.2:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"

+lodash.find@^4.3.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
+
 lodash.flattendeep@^4.4.0:
  version "4.4.0"
  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"

+lodash.foreach@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
+
 lodash.memoize@^4.1.2:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@ -4293,6 +4313,10 @@ lodash.mergewith@^4.6.0:
  version "4.6.1"
  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"

+lodash.reduce@^4.3.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.reduce/-/lodash.reduce-4.6.0.tgz#f1ab6b839299ad48f784abbf476596f03b914d3b"
+
 lodash.sortby@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@ -6059,7 +6083,7 @@ request-promise-native@^1.0.5:
    stealthy-require "^1.1.0"
    tough-cookie ">=2.3.3"

-request@2, request@^2.79.0, request@^2.83.0:
+request@2, request@^2.79.0, request@^2.83.0, request@^2.85.0:
  version "2.87.0"
  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
  dependencies:
@ -6175,6 +6199,18 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
    hash-base "^3.0.0"
    inherits "^2.0.1"

+rollbar-sourcemap-webpack-plugin@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/rollbar-sourcemap-webpack-plugin/-/rollbar-sourcemap-webpack-plugin-2.3.0.tgz#47176fd6441d1ce17b4d3c7e9c9cf7f2076b0485"
+  dependencies:
+    async "^2.6.0"
+    babel-runtime "^6.26.0"
+    lodash.find "^4.3.0"
+    lodash.foreach "^4.2.0"
+    lodash.reduce "^4.3.0"
+    request "^2.85.0"
+    verror "^1.6.1"
+
 rst-selector-parser@^2.2.3:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
@ -6508,7 +6544,7 @@ source-map-support@^0.4.15:
  dependencies:
    source-map "^0.5.6"

-source-map-support@^0.5.0, source-map-support@^0.5.5, source-map-support@^0.5.6:
+source-map-support@^0.5.0, source-map-support@^0.5.3, source-map-support@^0.5.5, source-map-support@^0.5.6:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.6.tgz#4435cee46b1aab62b8e8610ce60f788091c51c13"
  dependencies:
@ -7260,7 +7296,7 @@ vendors@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"

-verror@1.10.0:
+verror@1.10.0, verror@^1.6.1:
  version "1.10.0"
  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
  dependencies: