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.
This commit is contained in:
Quinn Slack 2019-06-11 21:54:21 -07:00 committed by GitHub
parent 2f52ab3f81
commit 105bbff06f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 132 deletions

View File

@ -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',
],
}
}

View File

@ -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/],
}

View File

@ -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')],
},
},
],
},
],

View File

@ -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",

View File

@ -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)$/,

View File

@ -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"