From 105bbff06fa7851906401156af1b5342c65effaa Mon Sep 17 00:00:00 2001 From: Quinn Slack Date: Tue, 11 Jun 2019 21:54:21 -0700 Subject: [PATCH] use babel-loader instead of ts-loader in webpack for TypeScript builds (#3960) This is moving us toward using Babel for all transpilation. This change doesn't lose us anything; we already were only doing transpilation, not typechecking, in Webpack, and Babel does transpilation just as well as ts-loader does. --- babel.config.js | 40 +++++++++++-------- browser/config/shared/webpack.ts | 56 --------------------------- browser/config/webpack/base.config.ts | 31 ++++++++++++--- package.json | 4 +- web/webpack.config.ts | 44 +++++---------------- yarn.lock | 47 ++++++++++++---------- 6 files changed, 90 insertions(+), 132 deletions(-) delete mode 100644 browser/config/shared/webpack.ts diff --git a/babel.config.js b/babel.config.js index c4f136c1559..0be0d730ad2 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,19 +1,27 @@ // @ts-check -/** @type {import('@babel/core').TransformOptions} */ -const config = { - presets: [ - [ - '@babel/preset-env', - { - modules: false, - useBuiltIns: 'entry', - }, - ], - '@babel/preset-typescript', - '@babel/preset-react', - ], - plugins: ['@babel/plugin-syntax-dynamic-import', 'babel-plugin-lodash'], -} +/** @type {import('@babel/core').ConfigFunction} */ +module.exports = api => { + api.cache.forever() -module.exports = config + return { + presets: [ + [ + '@babel/preset-env', + { + modules: false, + useBuiltIns: 'entry', + }, + ], + '@babel/preset-typescript', + '@babel/preset-react', + ], + plugins: [ + '@babel/plugin-syntax-dynamic-import', + 'babel-plugin-lodash', + + // Node 12 (released 2019 Apr 23) supports these natively, so we can remove this plugin soon. + '@babel/plugin-proposal-class-properties', + ], + } +} diff --git a/browser/config/shared/webpack.ts b/browser/config/shared/webpack.ts deleted file mode 100644 index d072396e274..00000000000 --- a/browser/config/shared/webpack.ts +++ /dev/null @@ -1,56 +0,0 @@ -import * as path from 'path' -import * as webpack from 'webpack' -import babelConfig from '../../babel.config' - -export const commonStylesheetLoaders: webpack.Loader[] = [ - { - loader: 'postcss-loader', - options: { - config: { - path: path.join(__dirname, '../..'), - }, - }, - }, - { - loader: 'sass-loader', - options: { - includePaths: [path.resolve(__dirname, '../../../node_modules')], - }, - }, -] - -const babelLoader: webpack.RuleSetUseItem = { - loader: 'babel-loader', - options: { - cacheDirectory: true, - ...babelConfig, - }, -} - -export const tsRule: webpack.RuleSetRule = { - test: /\.tsx?$/, - use: [ - babelLoader, - { - loader: 'ts-loader', - options: { - configFile: path.resolve(__dirname, '../tsconfig.webpack.json'), - compilerOptions: { - target: 'es6', - module: 'esnext', - noEmit: false, // tsconfig.json sets this to true to avoid output when running tsc manually - }, - experimentalWatchApi: true, - happyPackMode: true, // Typechecking is done by a separate tsc process, disable here for performance - transpileOnly: process.env.DISABLE_TYPECHECKING === 'true', - }, - }, - ], - // exclude: [/node_modules/], -} - -export const jsRule: webpack.RuleSetRule = { - test: /\.jsx?$/, - loader: babelLoader, - // exclude: [/node_modules/], -} diff --git a/browser/config/webpack/base.config.ts b/browser/config/webpack/base.config.ts index 3ce24dba292..6cc51b0d0e8 100644 --- a/browser/config/webpack/base.config.ts +++ b/browser/config/webpack/base.config.ts @@ -3,8 +3,6 @@ import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin' import * as path from 'path' import * as webpack from 'webpack' -import { commonStylesheetLoaders, jsRule, tsRule } from '../shared/webpack' - const buildEntry = (...files: string[]) => files.map(file => path.join(__dirname, file)) const contentEntry = '../../src/config/content.entry.js' @@ -40,8 +38,18 @@ const config: webpack.Configuration = { }, module: { rules: [ - tsRule, - jsRule, + { + test: /\.[jt]sx?$/, + use: [ + { + loader: 'babel-loader', + options: { + cacheDirectory: true, + configFile: path.join(__dirname, '..', '..', 'babel.config.js'), + }, + }, + ], + }, { // SCSS rule for our own styles and Bootstrap test: /\.(css|sass|scss)$/, @@ -50,7 +58,20 @@ const config: webpack.Configuration = { { loader: 'css-loader', }, - ...commonStylesheetLoaders, + { + loader: 'postcss-loader', + options: { + config: { + path: path.join(__dirname, '../..'), + }, + }, + }, + { + loader: 'sass-loader', + options: { + includePaths: [path.resolve(__dirname, '../../../node_modules')], + }, + }, ], }, ], diff --git a/package.json b/package.json index 6d699556aa5..b7001c97d1e 100644 --- a/package.json +++ b/package.json @@ -47,9 +47,12 @@ }, "devDependencies": { "@babel/core": "^7.2.2", + "@babel/plugin-proposal-class-properties": "^7.4.4", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/polyfill": "^7.2.5", "@babel/preset-env": "^7.2.3", + "@babel/preset-react": "^7.0.0", + "@babel/preset-typescript": "^7.3.3", "@babel/runtime": "^7.2.0", "@gql2ts/from-schema": "^1.10.1", "@gql2ts/language-typescript": "^1.9.0", @@ -172,7 +175,6 @@ "stylelint": "^10.1.0", "terser-webpack-plugin": "^1.3.0", "ts-jest": "^24.0.2", - "ts-loader": "^6.0.2", "ts-node": "^8.2.0", "tslint": "^5.17.0", "typedoc": "^0.14.2", diff --git a/web/webpack.config.ts b/web/webpack.config.ts index dcbd1289743..4470d6fa32c 100644 --- a/web/webpack.config.ts +++ b/web/webpack.config.ts @@ -19,30 +19,8 @@ const rootDir = path.resolve(__dirname, '..') const nodeModulesPath = path.resolve(__dirname, '..', 'node_modules') const monacoEditorPaths = [path.resolve(nodeModulesPath, 'monaco-editor')] -const babelLoader: webpack.RuleSetUseItem = { - loader: 'babel-loader', - options: { - cacheDirectory: true, - configFile: path.join(__dirname, 'babel.config.js'), - }, -} - -const typescriptLoader: webpack.RuleSetUseItem = { - loader: 'ts-loader', - options: { - compilerOptions: { - target: 'es6', - module: 'esnext', - noEmit: false, - }, - experimentalWatchApi: true, - happyPackMode: true, // Typechecking is done by a separate tsc process, disable here for performance - }, -} - const isEnterpriseBuild = !!process.env.ENTERPRISE const enterpriseDir = path.resolve(__dirname, 'src', 'enterprise') -const sourceRoots = [path.resolve(__dirname, 'src'), path.resolve(rootDir, 'shared')] const config: webpack.Configuration = { context: __dirname, // needed when running `gulp webpackDevServer` from the root dir @@ -119,18 +97,16 @@ const config: webpack.Configuration = { module: { rules: [ { - test: /\.tsx?$/, - include: sourceRoots, - use: [babelLoader, typescriptLoader], - }, - { - test: /\.m?js$/, - use: [babelLoader], - }, - { - test: /\.mjs$/, - include: nodeModulesPath, - type: 'javascript/auto', + test: /\.[jt]sx?$/, + use: [ + { + loader: 'babel-loader', + options: { + cacheDirectory: true, + configFile: path.join(__dirname, 'babel.config.js'), + }, + }, + ], }, { test: /\.(sass|scss)$/, diff --git a/yarn.lock b/yarn.lock index ec58eff50aa..df5cd0e60d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -72,7 +72,7 @@ "@babel/traverse" "^7.4.4" "@babel/types" "^7.4.4" -"@babel/helper-create-class-features-plugin@^7.3.0": +"@babel/helper-create-class-features-plugin@^7.3.0", "@babel/helper-create-class-features-plugin@^7.4.4": version "7.4.4" resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.4.tgz#fc3d690af6554cc9efc607364a82d48f58736dba" integrity sha512-UbBHIa2qeAGgyiNR9RszVF7bUHEdgS4JAUNT8SiqrAN6YJVxlOxeLr5pBzb5kan302dejJ9nla4RyKcR1XT6XA== @@ -247,7 +247,7 @@ "@babel/helper-remap-async-to-generator" "^7.1.0" "@babel/plugin-syntax-async-generators" "^7.2.0" -"@babel/plugin-proposal-class-properties@7.3.0", "@babel/plugin-proposal-class-properties@^7.3.0": +"@babel/plugin-proposal-class-properties@7.3.0": version "7.3.0" resolved "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.0.tgz#272636bc0fa19a0bc46e601ec78136a173ea36cd" integrity sha512-wNHxLkEKTQ2ay0tnsam2z7fGZUi+05ziDJflEt3AZTP3oXLKHJp9HqhfroB/vdMvt3sda9fAbq7FsG8QPDrZBg== @@ -255,6 +255,14 @@ "@babel/helper-create-class-features-plugin" "^7.3.0" "@babel/helper-plugin-utils" "^7.0.0" +"@babel/plugin-proposal-class-properties@^7.3.0", "@babel/plugin-proposal-class-properties@^7.4.4": + version "7.4.4" + resolved "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.4.tgz#93a6486eed86d53452ab9bab35e368e9461198ce" + integrity sha512-WjKTI8g8d5w1Bc9zgwSz2nfrsNQsXcCf9J9cdCvrJV6RF56yztwm4TmJC0MgJ9tvwO9gUA/mcYe89bLdGfiXFg== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.4.4" + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-proposal-decorators@7.3.0": version "7.3.0" resolved "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.3.0.tgz#637ba075fa780b1f75d08186e8fb4357d03a72a7" @@ -681,10 +689,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-transform-typescript@^7.1.0": - version "7.4.0" - resolved "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.4.0.tgz#0389ec53a34e80f99f708c4ca311181449a68eb1" - integrity sha512-U7/+zKnRZg04ggM/Bm+xmu2B/PrwyDQTT/V89FXWYWNMxBDwSx56u6jtk9SEbfLFbZaEI72L+5LPvQjeZgFCrQ== +"@babel/plugin-transform-typescript@^7.1.0", "@babel/plugin-transform-typescript@^7.3.2": + version "7.4.5" + resolved "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.4.5.tgz#ab3351ba35307b79981993536c93ff8be050ba28" + integrity sha512-RPB/YeGr4ZrFKNwfuQRlMf2lxoCUaU01MTw39/OFE/RiL8HDjtn68BwEPft1P7JN4akyEmjGWAMNldOV7o9V2g== dependencies: "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-typescript" "^7.2.0" @@ -836,6 +844,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-transform-typescript" "^7.1.0" +"@babel/preset-typescript@^7.3.3": + version "7.3.3" + resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz#88669911053fa16b2b276ea2ede2ca603b3f307a" + integrity sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-typescript" "^7.3.2" + "@babel/runtime-corejs2@^7.2.0": version "7.4.2" resolved "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.4.2.tgz#a0cec2c41717fa415e9c204f32b603d88b1796c2" @@ -1504,7 +1520,8 @@ integrity sha512-Te7F1RQJLBH4C8wQ2xz0nPC2vpe13F80V+Yv+c3GySOoh4DcLNN4P5u51Kh4aZPqeS5DJ7CKvHyX2SM/1EBXNg== "@sourcegraph/extension-api-types@link:packages/@sourcegraph/extension-api-types": - version "2.0.0" + version "0.0.0" + uid "" "@sourcegraph/prettierrc@^3.0.1": version "3.0.1" @@ -6175,7 +6192,7 @@ engine.io@~3.3.1: engine.io-parser "~2.1.0" ws "~6.1.0" -enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0: +enhanced-resolve@^4.1.0: version "4.1.0" resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f" integrity sha512-F/7vkyTtyc/llOIn8oWclcB25KdRaiPBpZYDgJHgh/UHtpgT2p2eldQgtQnLtUvfMKPKxbRaQM/hHkvLHt1Vng== @@ -13630,7 +13647,8 @@ source-map@^0.7.2: integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== "sourcegraph@link:packages/sourcegraph-extension-api": - version "23.0.1" + version "0.0.0" + uid "" space-separated-tokens@^1.0.0: version "1.1.2" @@ -14620,17 +14638,6 @@ ts-key-enum@^2.0.0: resolved "https://registry.npmjs.org/ts-key-enum/-/ts-key-enum-2.0.0.tgz#35c98f0bc2c733fffe4225c4febe039b05f1c686" integrity sha1-NcmPC8LHM//+QiXE/r4DmwXxxoY= -ts-loader@^6.0.2: - version "6.0.2" - resolved "https://registry.npmjs.org/ts-loader/-/ts-loader-6.0.2.tgz#cbd46a1495668ed9d59813f5c66f4bb49ff0c14c" - integrity sha512-kkF3sGf3oBUehlvXI9fkbItbFTnNgGkYAz91vtWnsKAU4m+LAmQjuby7uTZNo3As+/zHLuyB052SkQDY6vLXtg== - dependencies: - chalk "^2.3.0" - enhanced-resolve "^4.0.0" - loader-utils "^1.0.2" - micromatch "^4.0.0" - semver "^6.0.0" - ts-node@^8.2.0: version "8.2.0" resolved "https://registry.npmjs.org/ts-node/-/ts-node-8.2.0.tgz#4a89754b00560bb24cd54526e1685fa38c45f240"