fix(sourcemaps): fix sourcemap generation for browser code [triage-skip] (#29)

* fix(sourcemaps): fix sourcemap generation for browser code

* chore(*): add ts-loader dependencies

Author: jshcrowthe

gulp/tasks/build.js

@@ -52,7 +52,7 @@ function cleanDist(dir) {
 
 function compileTypescriptToES2015() {
   const stream = tsProject.src()
-    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(sourcemaps.init({ loadMaps: true }))
     .pipe(tsProject());
   return merge([
     stream.dts
@@ -65,7 +65,7 @@ function compileTypescriptToES2015() {
 
 function compileES2015ToCJS() {
   return gulp.src('dist/es2015/**/*.js')
-    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(sourcemaps.init({ loadMaps: true }))
     .pipe(babel(config.babel))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(`${config.paths.outDir}/cjs`))
@@ -115,30 +115,46 @@ function compileIndvES2015ModulesToBrowser() {
     return pathObj.name === 'firebase-app';
   };
 
-  // Webpack config for compiling indv modules
+  const babelLoader = {
+    loader: 'babel-loader',
+    options: config.babel
+  };
+
+  const tsLoader = {
+    loader: 'ts-loader',
+    options: {
+      compilerOptions: {
+        declaration: false
+      }
+    }
+  };
+
   const webpackConfig = {
+    devtool: 'source-map',
     entry: {
-      'firebase-app': './dist/es2015/app.js',
-      'firebase-storage': './dist/es2015/storage.js',
-      'firebase-messaging': './dist/es2015/messaging.js',
+      'firebase-app': './src/app.ts',
+      'firebase-storage': './src/storage.ts',
+      'firebase-messaging': './src/messaging.ts',
     },
     output: {
-      filename: '[name].js',
+      path: path.resolve(__dirname, './dist/browser'),
+      filename: '[name].js'
     },
     module: {
-      rules: [
-        {
-          test: /\.js$/,
-          exclude: /(node_modules|bower_components)/,
-          use: {
-            loader: 'babel-loader',
-            options: {
-              presets: config.babel.presets,
-              plugins: config.babel.plugins
-            }
-          }
-        }
-      ]
+      rules: [{
+        test: /\.ts(x?)$/,
+        exclude: /node_modules/,
+        use: [
+          babelLoader,
+          tsLoader
+        ]
+      }, {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          babelLoader
+        ]
+      }]
     },
     plugins: [
       new webpack.optimize.CommonsChunkPlugin({
@@ -147,7 +163,7 @@ function compileIndvES2015ModulesToBrowser() {
       new WrapperPlugin({
         header: fileName => {
           return isFirebaseApp(fileName) ? `var firebase = (function() {
-          var window = typeof window === 'undefined' ? self : window;
+            var window = typeof window === 'undefined' ? self : window;
           return ` : `try {
           `;
         },
@@ -162,20 +178,17 @@ function compileIndvES2015ModulesToBrowser() {
           }`        
         }
       }),
-      new webpack.optimize.UglifyJsPlugin()
-    ]
-  };
-  return gulp.src('./dist/es2015/firebase.js')
+      new webpack.optimize.UglifyJsPlugin({
+        sourceMap: true
+      })
+    ],
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js']
+    },
+  }
+
+  return gulp.src('src/**/*.ts')
     .pipe(webpackStream(webpackConfig, webpack))
-    .pipe(sourcemaps.init({loadMaps: true}))
-    .pipe(through.obj(function(file, enc, cb) {
-      // Dont pipe through any source map files as it will be handled
-      // by gulp-sourcemaps
-      var isSourceMap = /\.map$/.test(file.path);
-      if (!isSourceMap) this.push(file);
-      cb();
-    }))
-    .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(`${config.paths.outDir}/browser`));
 }
 
@@ -188,7 +201,7 @@ function compileSDKES2015ToBrowser() {
         })
       ]
     }, webpack))
-    .pipe(sourcemaps.init({loadMaps: true}))
+    .pipe(sourcemaps.init({ loadMaps: true }))
     .pipe(through.obj(function(file, enc, cb) {
       // Dont pipe through any source map files as it will be handled
       // by gulp-sourcemaps
@@ -202,7 +215,9 @@ function compileSDKES2015ToBrowser() {
 
 function buildBrowserFirebaseJs() {
   return gulp.src('./dist/browser/*.js')
+    .pipe(sourcemaps.init({ loadMaps: true }))
     .pipe(concat('firebase.js'))
+    .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(`${config.paths.outDir}/browser`));
 }
 
@@ -223,7 +238,7 @@ function buildAltEnvFirebaseJs() {
       ]
     });
     return gulp.src('./dist/es2015/firebase.js')
-      .pipe(sourcemaps.init({loadMaps: true}))
+      .pipe(sourcemaps.init({ loadMaps: true }))
       .pipe(babel(babelConfig))
       .pipe(rename({
         suffix: `-${env}`

package.json

@@ -77,6 +77,7 @@
     "shx": "^0.2.2",
     "sinon": "^2.1.0",
     "through2": "^2.0.3",
+    "ts-loader": "^2.1.0",
     "ts-node": "2.1.1",
     "typescript": "^2.2.1",
     "validate-commit-msg": "^2.12.1",

yarn.lock

@@ -1361,7 +1361,7 @@ [email protected]:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
 
-colors@^1.1.0, colors@^1.1.2:
+colors@^1.0.3, colors@^1.1.0, colors@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
 
@@ -3682,6 +3682,14 @@ loader-utils@^0.2.11, loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+loader-utils@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+
 lodash._baseassign@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
@@ -5156,7 +5164,7 @@ [email protected], semver-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-1.0.0.tgz#92a4969065f9c70c694753d55248fc68f8f652c9"
 
-"semver@2 || 3 || 4 || 5", semver@^5.3.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
@@ -5760,6 +5768,15 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+ts-loader@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-2.1.0.tgz#5a8efcc5c72c06fc49d69bad69c85617c6194f77"
+  dependencies:
+    colors "^1.0.3"
+    enhanced-resolve "^3.0.0"
+    loader-utils "^1.0.2"
+    semver "^5.0.1"
+
 [email protected]:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-2.1.1.tgz#2fe7049ea56319730052a9e677985e6151a7bd31"