Fix extra CSS being included on the client

This commit is contained in:
Asher 2019-02-26 11:07:00 -06:00
parent 7b5871136b
commit 04e02bdb08
No known key found for this signature in database
GPG Key ID: 7BB4BA9C783D2BBC
16 changed files with 281 additions and 291 deletions

View File

@ -28,7 +28,7 @@ const buildServerBinaryPackage = register("build:server:binary:package", async (
const cliPath = path.join(pkgsPath, "server");
runner.cwd = cliPath;
if (!fs.existsSync(path.join(cliPath, "out"))) {
throw new Error("Cannot build binary without web bundle built");
throw new Error("Cannot build binary without server bundle built");
}
await buildServerBinaryCopy();
await dependencyNexeBinary();
@ -78,7 +78,7 @@ const buildServerBinaryCopy = register("build:server:binary:copy", async (runner
const cliBuildPath = path.join(cliPath, "build");
fse.removeSync(cliBuildPath);
fse.mkdirpSync(path.join(cliBuildPath, "extensions"));
const bootstrapForkPath = path.join(pkgsPath, "vscode", "bin", "bootstrap-fork.js");
const bootstrapForkPath = path.join(pkgsPath, "vscode", "out", "bootstrap-fork.js");
const webOutputPath = path.join(pkgsPath, "web", "out");
const browserAppOutputPath = path.join(pkgsPath, "app", "browser", "out");
const nodePtyModule = path.join(pkgsPath, "protocol", "node_modules", "node-pty", "build", "Release", "pty.node");
@ -124,7 +124,7 @@ const buildServerBinaryCopy = register("build:server:binary:copy", async (runner
const buildServerBundle = register("build:server:bundle", async (runner) => {
const cliPath = path.join(pkgsPath, "server");
runner.cwd = cliPath;
await runner.execute("npm", ["run", "build:webpack"]);
await runner.execute("npm", ["run", "build"]);
});
const buildBootstrapFork = register("build:bootstrap-fork", async (runner) => {

View File

@ -2,23 +2,16 @@ const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const prod = process.env.NODE_ENV === "production";
module.exports = merge(require(path.join(__dirname, "../../../scripts", "webpack.general.config.js"))(), {
devtool: prod ? "source-map" : "cheap-module-eval-source-map",
mode: prod ? "production" : "development",
const root = path.resolve(__dirname, "../../..");
module.exports = merge(
require(path.join(root, "scripts/webpack.client.config.js"))({
entry: path.join(root, "packages/app/browser/src/app.ts"),
template: path.join(root, "packages/app/browser/src/app.html"),
}), {
output: {
path: path.join(__dirname, "out"),
},
entry: [
"webpack-hot-middleware/client?reload=true&quiet=true",
"./packages/app/browser/src/app.ts"
],
plugins: [
new HtmlWebpackPlugin({
template: "packages/app/browser/src/app.html",
}),
new webpack.HotModuleReplacementPlugin(),
// new BundleAnalyzerPlugin(),
]
});
},
);

View File

@ -1,10 +1,12 @@
const path = require("path");
const merge = require("webpack-merge");
module.exports = merge(require(path.join(__dirname, "../../scripts", "webpack.general.config.js"))(), {
devtool: "none",
mode: "production",
target: "node",
const root = path.resolve(__dirname, "../..");
module.exports = merge(
require(path.join(root, "scripts/webpack.node.config.js"))({
// Options.
}), {
externals: {
"node-named": "commonjs node-named",
},
@ -15,4 +17,5 @@ module.exports = merge(require(path.join(__dirname, "../../scripts", "webpack.ge
entry: [
"./packages/dns/src/dns.ts"
],
});
},
);

View File

@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

View File

@ -5,12 +5,8 @@
"files": [],
"scripts": {
"start": "node --max-old-space-size=32384 --require ts-node/register --require tsconfig-paths/register src/cli.ts",
"build:webpack": "rm -rf ./out && export CLI=true && UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js",
"build:nexe": "node scripts/nexe.js",
"build:bootstrap-fork": "cd ../vscode && npm run build:bootstrap-fork; mkdir -p ./packages/server/resources; cp ./bin/bootstrap-fork.js ../server/resources/bootstrap-fork.js",
"build:default-extensions": "cd ../../lib/vscode && npx gulp vscode-linux-arm && cd ../.. && mkdir -p ./packages/server/resources/extensions; cp -r ./lib/VSCode-linux-arm/resources/app/extensions/* ./packages/server/resources/extensions/",
"build:web": "cd ../web; rm -rf ./out; NODE_ENV=production npm run build; rm -rf ../server/resources/web; mkdir -p ../server/resources/web; cp -r ./out/* ../server/resources/web",
"build": "npm run build:bootstrap-fork && npm run build:webpack && npm run build:nexe"
"build": "rm -rf ./out && export CLI=true && UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js",
"build:nexe": "node scripts/nexe.js"
},
"dependencies": {
"@oclif/config": "^1.10.4",

View File

@ -110,7 +110,7 @@ export const requireModule = (modulePath: string, dataDir: string, builtInExtens
if (isCli) {
content = zlib.gunzipSync(readFile("bootstrap-fork.js.gz"));
} else {
content = readFile("../../vscode/bin/bootstrap-fork.js");
content = readFile("../../vscode/out/bootstrap-fork.js");
}
eval(content.toString());
};

View File

@ -2,12 +2,15 @@ const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
module.exports = merge({
devtool: "none",
mode: "production",
const root = path.resolve(__dirname, "../..");
module.exports = merge(
require(path.join(root, "scripts/webpack.node.config.js"))({
// Config options.
}), {
output: {
filename: "cli.js",
path: path.join(__dirname, "./out"),
path: path.join(__dirname, "out"),
libraryTarget: "commonjs",
},
node: {
@ -21,11 +24,11 @@ module.exports = merge({
},
externals: ["tslib", "trash"],
entry: "./packages/server/src/cli.ts",
target: "node",
plugins: [
new webpack.DefinePlugin({
"process.env.BUILD_DIR": `"${__dirname}"`,
"process.env.CLI": `"${process.env.CLI ? "true" : "false"}"`,
}),
],
}, require("../../scripts/webpack.general.config")());
},
);

View File

@ -3,7 +3,7 @@
"description": "VS Code implementation of the browser-based IDE client.",
"main": "src/index.ts",
"scripts": {
"build:bootstrap-fork": "../../node_modules/.bin/webpack --config ./webpack.config.bootstrap.js"
"build:bootstrap-fork": "UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.bootstrap.config.js"
},
"dependencies": {
"iconv-lite": "^0.4.24",

View File

@ -29,8 +29,6 @@ import { RawContextKey, IContextKeyService } from "vs/platform/contextkey/common
import { ServiceCollection } from "vs/platform/instantiation/common/serviceCollection";
import { URI } from "vs/base/common/uri";
import "vs/loader";
export class Workbench {
private readonly windowId = parseInt(new Date().toISOString().replace(/[-:.TZ]/g, ""), 10);
private _serviceCollection: ServiceCollection | undefined;

View File

@ -0,0 +1,69 @@
const path = require("path");
const merge = require("webpack-merge");
const root = path.resolve(__dirname, "../..");
const fills = path.join(root, "packages/ide/src/fill");
const vsFills = path.join(root, "packages/vscode/src/fill");
module.exports = merge(
require(path.join(root, "scripts/webpack.node.config.js"))({
typescriptCompilerOptions: {
target: "es5",
},
}), {
entry: path.join(root, "lib/vscode/src/bootstrap-fork.js"),
mode: "development",
output: {
chunkFilename: "[name].bundle.js",
path: path.resolve(__dirname, "out"),
publicPath: "/",
filename: "bootstrap-fork.js",
libraryTarget: "commonjs",
globalObject: "this",
},
// Due to the dynamic `require.context` we add to `loader.js` Webpack tries
// to include way too much. We can modify what Webpack imports in this case
// (I believe), but for now ignore some things.
module: {
rules: [{
test: /\.(txt|d\.ts|perf\.data\.js|jxs|scpt|exe|sh|less|html|s?css|qwoff|md|svg|png|ttf|woff|eot|woff2)$/,
use: [{
loader: "ignore-loader",
}],
}, {
test: /test|tsconfig/,
use: [{
loader: "ignore-loader",
}],
}, {
test: /(\/vs\/code\/electron-main\/)|(\/test\/)|(OSSREADME\.json$)|(\.(test\.ts|test\.js|d\.ts|qwoff|node|html|txt|exe|wuff|md|sh|scpt|less)$)/,
use: [{
loader: "ignore-loader",
}],
}],
noParse: /\/test\/|\.test\.jsx?|\.test\.tsx?|tsconfig.+\.json$/,
},
resolve: {
alias: {
"gc-signals": path.join(fills, "empty.ts"),
"node-pty": path.resolve(fills, "empty.ts"),
"windows-mutex": path.resolve(fills, "empty.ts"),
"windows-process-tree": path.resolve(fills, "empty.ts"),
"electron": path.join(vsFills, "stdioElectron.ts"),
"native-keymap": path.join(vsFills, "native-keymap.ts"),
"native-watchdog": path.join(vsFills, "native-watchdog.ts"),
"vs/base/common/amd": path.resolve(vsFills, "amd.ts"),
"vs/base/node/paths": path.resolve(vsFills, "paths.ts"),
"vs/platform/node/package": path.resolve(vsFills, "package.ts"),
"vs/platform/node/product": path.resolve(vsFills, "product.ts"),
"vs": path.resolve(root, "lib/vscode/src/vs"),
},
},
resolveLoader: {
alias: {
"vs/css": path.resolve(vsFills, "css.js"),
},
},
}
);

View File

@ -1,61 +0,0 @@
const path = require("path");
const webpack = require("webpack");
const root = path.resolve(__dirname, "../..");
const fills = path.join(root, "packages/ide/src/fill");
const vscodeFills = path.join(root, "packages/vscode/src/fill");
const merge = require("webpack-merge");
module.exports = (env) => {
return merge(require(path.join(root, "scripts/webpack.general.config.js"))({
typescriptCompilerOptions: {
target: "es5",
},
}), {
entry: path.join(root, "lib/vscode/src/bootstrap-fork.js"),
mode: "development",
target: "node",
output: {
chunkFilename: "[name].bundle.js",
path: path.resolve(__dirname, "./bin"),
publicPath: "/",
filename: "bootstrap-fork.js",
libraryTarget: "commonjs",
globalObject: "this",
},
module: {
rules: [{
// Ignore a bunch of file types we don't have loaders for. Also ignore
// test directories, some files with invalid JSON, and files we don't
// actually require but throw warnings or errors. This all seems to be a
// case of dynamic loading including things we won't require.
// This also results in the bundle being significantly smaller which
// makes uglify much faster.
test: /(\/vs\/code\/electron-main\/)|(\/test\/)|(OSSREADME\.json$)|(\.(test\.ts|test\.js|d\.ts|qwoff|node|html|txt|exe|wuff|md|sh|scpt|less)$)/,
use: ["ignore-loader"]
}],
},
resolve: {
alias: {
"gc-signals": path.join(fills, "empty.ts"),
"native-keymap": path.join(fills, "native-keymap.ts"),
"windows-process-tree": path.resolve(fills, "empty.ts"),
"node-pty": path.resolve(fills, "empty.ts"),
"electron": path.join(vscodeFills, "stdioElectron.ts"),
"native-watchdog": path.join(vscodeFills, "native-watchdog.ts"),
"vs/platform/node/product": path.resolve(vscodeFills, "product.ts"),
"vs/platform/node/package": path.resolve(vscodeFills, "package.ts"),
"vs/base/node/paths": path.resolve(vscodeFills, "paths.ts"),
"vs/base/common/amd": path.resolve(vscodeFills, "amd.ts"),
"vs": path.resolve(root, "lib/vscode/src/vs"),
},
},
resolveLoader: {
alias: {
"vs/css": path.resolve(vscodeFills, "css.js"),
},
},
});
};

View File

@ -1,91 +0,0 @@
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const PreloadWebpackPlugin = require("preload-webpack-plugin");
const root = path.resolve(__dirname, "../..");
const fills = path.join(root, "packages/ide/src/fill");
const vsFills = path.join(root, "packages/vscode/src/fill");
const merge = require("webpack-merge");
module.exports = merge({
entry: "./packages/web/src/index.ts",
output: {
chunkFilename: "[name]-[hash:6].bundle.js",
path: path.join(root, "dist"),
filename: "[hash:6].bundle.js",
},
node: {
module: "empty",
crypto: "empty",
tls: "empty",
},
resolve: {
alias: {
"gc-signals": path.join(fills, "empty.ts"),
"selenium-webdriver": path.join(fills, "empty.ts"),
"vscode": path.join(fills, "empty.ts"),
"vscode-fsevents": path.join(fills, "empty.ts"),
"vsda": path.join(fills, "empty.ts"),
"windows-foreground-love": path.join(fills, "empty.ts"),
"windows-mutex": path.join(fills, "empty.ts"),
"windows-process-tree": path.join(fills, "empty.ts"),
"vscode-sqlite3": path.join(fills, "empty.ts"),
"tls": path.join(fills, "empty.ts"),
"native-is-elevated": path.join(fills, "empty.ts"),
"dns": path.join(fills, "empty.ts"),
"console": path.join(fills, "empty.ts"),
"readline": path.join(fills, "empty.ts"),
"oniguruma": path.join(fills, "empty.ts"),
// Webpack includes path-browserify but not the latest version, so
// path.posix and path.parse are undefined (among other things possibly).
// Also if we don't provide the full path, the code in vscode will import
// from vscode's node_modules which is the wrong version.
"path": path.join(root, "node_modules", "path-browserify"),
"crypto": "crypto-browserify",
"http": "http-browserify",
"child_process": path.join(fills, "child_process.ts"),
"os": path.join(fills, "os.ts"),
"fs": path.join(fills, "fs.ts"),
"net": path.join(fills, "net.ts"),
"util": path.join(fills, "util.ts"),
"electron": path.join(fills, "electron.ts"),
"native-keymap": path.join(vsFills, "native-keymap.ts"),
"node-pty": path.join(vsFills, "node-pty.ts"),
"graceful-fs": path.join(vsFills, "graceful-fs.ts"),
"spdlog": path.join(vsFills, "spdlog.ts"),
"native-watchdog": path.join(vsFills, "native-watchdog.ts"),
"iconv-lite": path.join(vsFills, "iconv-lite.ts"),
"vs/base/node/paths": path.join(vsFills, "paths.ts"),
"vs/base/common/amd": path.join(vsFills, "amd.ts"),
"vs/platform/node/product": path.join(vsFills, "product.ts"),
"vs/platform/node/package": path.join(vsFills, "package.ts"),
"vs": path.join(root, "lib", "vscode", "src", "vs"),
},
},
resolveLoader: {
alias: {
"vs/css": path.join(vsFills, "css.js"),
},
},
plugins: [
new HtmlWebpackPlugin({
template: "packages/web/src/index.html",
}),
new PreloadWebpackPlugin({
rel: "preload",
as: "script",
}),
],
target: "web",
}, require(path.join(root, "scripts", "webpack.general.config.js"))({
typescriptCompilerOptions: {
"target": "es5",
"lib": ["dom", "esnext"],
"importHelpers": true,
},
}));

View File

@ -1,22 +1,81 @@
const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const prod = process.env.NODE_ENV === "production";
module.exports = merge(require("./webpack.common.config.js"), {
devtool: prod ? "source-map" : "cheap-module-eval-source-map",
mode: prod ? "production" : "development",
output: {
path: path.join(__dirname, "out"),
const root = path.resolve(__dirname, "../..");
const fills = path.join(root, "packages/ide/src/fill");
const vsFills = path.join(root, "packages/vscode/src/fill");
module.exports = merge(
require(path.join(root, "scripts/webpack.client.config.js"))({
entry: path.join(root, "packages/web/src/index.ts"),
template: path.join(root, "packages/web/src/index.html"),
typescriptCompilerOptions: {
"target": "es5",
"lib": ["dom", "esnext"],
"importHelpers": true,
},
},
), {
output: {
chunkFilename: "[name]-[hash:6].bundle.js",
path: path.join(__dirname, "out"),
filename: "[hash:6].bundle.js",
},
node: {
module: "empty",
crypto: "empty",
tls: "empty",
},
resolve: {
alias: {
"gc-signals": path.join(fills, "empty.ts"),
"selenium-webdriver": path.join(fills, "empty.ts"),
"vscode": path.join(fills, "empty.ts"),
"vscode-fsevents": path.join(fills, "empty.ts"),
"vsda": path.join(fills, "empty.ts"),
"windows-foreground-love": path.join(fills, "empty.ts"),
"windows-mutex": path.join(fills, "empty.ts"),
"windows-process-tree": path.join(fills, "empty.ts"),
"vscode-sqlite3": path.join(fills, "empty.ts"),
"tls": path.join(fills, "empty.ts"),
"native-is-elevated": path.join(fills, "empty.ts"),
"dns": path.join(fills, "empty.ts"),
"console": path.join(fills, "empty.ts"),
"readline": path.join(fills, "empty.ts"),
"oniguruma": path.join(fills, "empty.ts"),
// Webpack includes path-browserify but not the latest version, so
// path.posix and path.parse are undefined (among other things possibly).
// Also if we don't provide the full path, the code in vscode will import
// from vscode's node_modules which is the wrong version.
"path": path.join(root, "node_modules", "path-browserify"),
"crypto": "crypto-browserify",
"http": "http-browserify",
"child_process": path.join(fills, "child_process.ts"),
"os": path.join(fills, "os.ts"),
"fs": path.join(fills, "fs.ts"),
"net": path.join(fills, "net.ts"),
"util": path.join(fills, "util.ts"),
"electron": path.join(fills, "electron.ts"),
"native-keymap": path.join(vsFills, "native-keymap.ts"),
"node-pty": path.join(vsFills, "node-pty.ts"),
"graceful-fs": path.join(vsFills, "graceful-fs.ts"),
"spdlog": path.join(vsFills, "spdlog.ts"),
"native-watchdog": path.join(vsFills, "native-watchdog.ts"),
"iconv-lite": path.join(vsFills, "iconv-lite.ts"),
"vs/base/node/paths": path.join(vsFills, "paths.ts"),
"vs/base/common/amd": path.join(vsFills, "amd.ts"),
"vs/platform/node/product": path.join(vsFills, "product.ts"),
"vs/platform/node/package": path.join(vsFills, "package.ts"),
"vs": path.join(root, "lib", "vscode", "src", "vs"),
},
},
resolveLoader: {
alias: {
"vs/css": path.join(vsFills, "css.js"),
},
},
entry: [
"webpack-hot-middleware/client?reload=true&quiet=true",
"./packages/web/src/index.ts"
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
// new BundleAnalyzerPlugin(),
]
});

View File

@ -0,0 +1,58 @@
const webpack = require("webpack");
const path = require("path");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PreloadWebpackPlugin = require("preload-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const root = path.join(__dirname, "..");
const prod = process.env.NODE_ENV === "production";
module.exports = (options = {}) => merge(
require("./webpack.general.config")(options), {
devtool: prod ? "source-map" : "cheap-module-eval-source-map",
mode: prod ? "production" : "development",
entry: prod ? options.entry : [
"webpack-hot-middleware/client?reload=true&quiet=true",
options.entry,
],
module: {
rules: [{
test: /\.s?css$/,
// This is required otherwise it'll fail to resolve CSS in common.
include: root,
use: [{
loader: MiniCssExtractPlugin.loader,
}, {
loader: "css-loader",
}, {
loader: "sass-loader",
}],
}, {
test: /\.(svg|png|ttf|woff|eot|woff2)$/,
use: [{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
}],
}],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new HtmlWebpackPlugin({
template: options.template,
}),
new PreloadWebpackPlugin({
rel: "preload",
as: "script",
}),
].concat(prod ? [] : [
new webpack.HotModuleReplacementPlugin(),
]),
target: "web",
});

View File

@ -3,13 +3,12 @@ const os = require("os");
const environment = process.env.NODE_ENV || "development";
const HappyPack = require("happypack");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const root = path.join(__dirname, "..");
module.exports = (options = {}) => ({
context: root,
devtool: "source-map",
devtool: "none",
module: {
rules: [{
loader: "string-replace-loader",
@ -32,22 +31,6 @@ module.exports = (options = {}) => ({
flags: "g",
}],
},
}, {
test: /\.(js|css)/,
exclude: /test/,
}, {
test: /\.(txt|d\.ts|test.ts|perf.data.js|jxs|scpt|exe|sh|less)$/,
use: [{
loader: "ignore-loader",
}],
}, {
// These are meant to run in separate pages, like the issue reporter or
// process explorer. Ignoring for now since otherwise their CSS is
// included in the main CSS.
test: /test|electron-browser.+\.html$|code\/electron-browser\/.+\.css$/,
use: [{
loader: "ignore-loader",
}],
}, {
test: /\.node$/,
use: "node-loader",
@ -56,37 +39,11 @@ module.exports = (options = {}) => ({
loader: "happypack/loader?id=ts",
}],
test: /(^.?|\.[^d]|[^.]d|[^.][^d])\.tsx?$/,
}, {
// Test CSS isn't required. The rest is supposed to be served in separate
// pages or iframes so we don't need to include it here. Also excluding
// markdown.css because even though it uses the file-loader as shown above
// in the string replace, it's still making its way into the main CSS.
exclude: /test|code\/electron-browser\/.+\.css$/,
test: /\.s?css$/,
// This is required otherwise it'll fail to resolve CSS in common.
include: root,
use: [{
loader: MiniCssExtractPlugin.loader,
}, {
loader: "css-loader",
}, {
loader: "sass-loader",
}],
}, {
test: /\.(svg|png|ttf|woff|eot|woff2)$/,
use: [{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
}],
}, {
test: /\.wasm$/,
type: "javascript/auto",
}, {
/**
* Fixes spdlog
*/
// Fixes spdlog.
test: /spdlog\/index\.js/,
loader: "string-replace-loader",
options: {
@ -118,7 +75,6 @@ module.exports = (options = {}) => ({
}],
},
}],
noParse: /\/test\/|\.test\.jsx?|\.test\.tsx?|tsconfig.+\.json$/,
},
resolve: {
alias: {
@ -151,12 +107,7 @@ module.exports = (options = {}) => ({
"process.env.NODE_ENV": `"${environment}"`,
"process.env.LOG_LEVEL": `"${process.env.LOG_LEVEL || ""}"`,
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
// target: "web",
stats: {
all: false, // Fallback for options not defined.
errors: true,

View File

@ -0,0 +1,8 @@
const merge = require("webpack-merge");
module.exports = (options = {}) => merge(
require("./webpack.general.config")(options), {
devtool: "none",
mode: "production",
target: "node",
});