This commit is contained in:
Ian Clanton-Thuon 2024-01-22 18:06:02 -05:00
Родитель e822aabb74
Коммит 662ca65a43
12 изменённых файлов: 375 добавлений и 1094 удалений

Просмотреть файл

@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@microsoft/gulp-core-build-webpack",
"comment": "Update to use Webpack 5 and drop support for Webpack 4.",
"type": "major"
}
],
"packageName": "@microsoft/gulp-core-build-webpack"
}

Просмотреть файл

@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@microsoft/gulp-core-build-webpack",
"comment": "Remove the built-in webpack configuration and the `--initwebpack` CLI parameter.",
"type": "major"
}
],
"packageName": "@microsoft/gulp-core-build-webpack"
}

Просмотреть файл

@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@microsoft/web-library-build",
"comment": "Update to Webpack 5.",
"type": "major"
}
],
"packageName": "@microsoft/web-library-build"
}

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -1,5 +1,5 @@
// DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
{
"pnpmShrinkwrapHash": "ce69845934c5c1570358260bd74a829f8eeb0646",
"pnpmShrinkwrapHash": "5222b83155bac93bc27dafd5bf79bec38e1aa1ae",
"preferredVersionsHash": "6a96c5550f3ce50aa19e8d1141c6c5d4176953ff"
}

Просмотреть файл

@ -7,7 +7,7 @@
import * as Gulp from 'gulp';
import { GulpTask } from '@microsoft/gulp-core-build';
import { IBuildConfig } from '@microsoft/gulp-core-build';
import * as Webpack from 'webpack';
import type * as Webpack from 'webpack';
// @public (undocumented)
export interface IWebpackResources {

Просмотреть файл

@ -12,9 +12,6 @@
### Description
This task invokes webpack using a consumer-specified `webpack.config.js` on a package.
### Command Line Options
If the `--initwebpack` flag is passed to the command line, this task will initialize a `webpack.config.js` which bundles `lib/index.js` into `dist/{packagename}.js as a UMD module.
### Config
```typescript
interface IWebpackConfig {

Просмотреть файл

@ -19,7 +19,7 @@
"@types/node": "10.17.13",
"colors": "~1.2.1",
"gulp": "~4.0.2",
"webpack": "~4.47.0"
"webpack": "~5.88.1"
},
"devDependencies": {
"@microsoft/node-library-build": "workspace:*",
@ -29,7 +29,6 @@
"@types/source-map": "0.5.0",
"@types/tapable": "1.0.6",
"@types/uglify-js": "2.6.29",
"@types/webpack": "4.41.24",
"eslint": "~7.12.1",
"tapable": "1.1.3"
}

Просмотреть файл

@ -2,7 +2,7 @@
// See LICENSE in the project root for license information.
import * as colors from 'colors';
import * as Webpack from 'webpack';
import type * as Webpack from 'webpack';
import { GulpTask, IBuildConfig } from '@microsoft/gulp-core-build';
import * as Gulp from 'gulp';
import { EOL } from 'os';
@ -84,133 +84,138 @@ export class WebpackTask<TExtendedConfig = {}> extends GulpTask<IWebpackTaskConf
}
public executeTask(gulp: typeof Gulp, completeCallback: (error?: string) => void): void {
const shouldInitWebpack: boolean = process.argv.indexOf('--initwebpack') > -1;
// eslint-disable-next-line
const path = require('path');
if (shouldInitWebpack) {
this.log(
'Initializing a webpack.config.js, which bundles lib/index.js ' +
'into dist/packagename.js into a UMD module.'
);
let webpackConfig: any; // eslint-disable-line @typescript-eslint/no-explicit-any
this.copyFile(path.resolve(__dirname, 'webpack.config.js'));
completeCallback();
} else {
let webpackConfig: any; // eslint-disable-line @typescript-eslint/no-explicit-any
if (this.taskConfig.configPath && this.fileExists(this.taskConfig.configPath)) {
try {
webpackConfig = require(this.resolvePath(this.taskConfig.configPath));
} catch (err) {
completeCallback(`Error parsing webpack config: ${this.taskConfig.configPath}: ${err}`);
return;
}
} else if (this.taskConfig.config) {
webpackConfig = this.taskConfig.config;
} else {
this._logMissingConfigWarning();
completeCallback();
if (this.taskConfig.configPath && this.fileExists(this.taskConfig.configPath)) {
try {
webpackConfig = require(this.resolvePath(this.taskConfig.configPath));
} catch (err) {
completeCallback(`Error parsing webpack config: ${this.taskConfig.configPath}: ${err}`);
return;
}
} else if (this.taskConfig.config) {
webpackConfig = this.taskConfig.config;
} else {
this._logMissingConfigWarning();
completeCallback();
return;
}
if (webpackConfig) {
const webpack: typeof Webpack = this.taskConfig.webpack || require('webpack');
const startTime: number = new Date().getTime();
const outputDir: string = this.buildConfig.distFolder;
if (webpackConfig) {
const webpack: typeof Webpack = this.taskConfig.webpack || require('webpack');
if (parseInt(webpack.version) !== 5) {
this.logWarning(
`This version of gulp-core-build-webpack is designed to work with webpack 5. ` +
`You are currently using webpack ${webpack.version}.`
);
}
const startTime: number = new Date().getTime();
const outputDir: string = this.buildConfig.distFolder;
webpack(webpackConfig, (error, stats) => {
if (!this.buildConfig.properties) {
this.buildConfig.properties = {};
webpack(webpackConfig, (error, stats) => {
if (!this.buildConfig.properties) {
this.buildConfig.properties = {};
}
// eslint-disable-next-line dot-notation
this.buildConfig.properties['webpackStats'] = stats;
let statsResult: Webpack.StatsCompilation | undefined;
try {
statsResult = stats?.toJson({
hash: false,
source: false
});
} catch (e) {
this.logError(`Error processing webpack stats: ${e}`);
if (error) {
// Log this here in case we didn't get a stats object because of an error. Otherwise log errors
// from the stats object.
this.logError(`Webpack error: ${error}`);
}
}
if (statsResult) {
if (statsResult.errors && statsResult.errors.length) {
this.logError(`'${outputDir}':` + EOL + statsResult.errors.join(EOL) + EOL);
}
// eslint-disable-next-line dot-notation
this.buildConfig.properties['webpackStats'] = stats;
if (statsResult.warnings && statsResult.warnings.length) {
const unsuppressedWarnings: Webpack.StatsError[] = [];
const warningSuppressionRegexes: RegExp[] = (this.taskConfig.suppressWarnings || []).map(
(regex: string) => {
return new RegExp(regex);
}
);
let statsResult: Webpack.Stats.ToJsonOutput | undefined;
try {
statsResult = stats.toJson({
hash: false,
source: false
});
} catch (e) {
this.logError(`Error processing webpack stats: ${e}`);
if (error) {
// Log this here in case we didn't get a stats object because of an error. Otherwise log errors
// from the stats object.
this.logError(`Webpack error: ${error}`);
}
}
if (statsResult) {
if (statsResult.errors && statsResult.errors.length) {
this.logError(`'${outputDir}':` + EOL + statsResult.errors.join(EOL) + EOL);
}
if (statsResult.warnings && statsResult.warnings.length) {
const unsuppressedWarnings: string[] = [];
const warningSuppressionRegexes: RegExp[] = (this.taskConfig.suppressWarnings || []).map(
(regex: string) => {
return new RegExp(regex);
for (const warning of statsResult.warnings) {
let suppressed: boolean = false;
for (let i: number = 0; i < warningSuppressionRegexes.length; i++) {
const suppressionRegex: RegExp = warningSuppressionRegexes[i];
if (warning.message.match(suppressionRegex)) {
suppressed = true;
break;
}
}
if (!suppressed) {
unsuppressedWarnings.push(warning);
}
}
if (unsuppressedWarnings.length > 0) {
this.logWarning(
`'${outputDir}':` +
EOL +
unsuppressedWarnings
.map(
(unsuppressedWarning) =>
(unsuppressedWarning.loc ? `${unsuppressedWarning.loc}: ` : '') +
unsuppressedWarning.message
)
.join(EOL) +
EOL
);
for (const warning of statsResult.warnings) {
let suppressed: boolean = false;
for (let i: number = 0; i < warningSuppressionRegexes.length; i++) {
const suppressionRegex: RegExp = warningSuppressionRegexes[i];
if (warning.match(suppressionRegex)) {
suppressed = true;
break;
}
}
if (!suppressed) {
unsuppressedWarnings.push(warning);
}
}
if (unsuppressedWarnings.length > 0) {
this.logWarning(`'${outputDir}':` + EOL + unsuppressedWarnings.join(EOL) + EOL);
}
}
}
if (this.taskConfig.printStats) {
const duration: number = new Date().getTime() - startTime;
const statsResultChildren: Webpack.Stats.ToJsonOutput[] = statsResult.children
? statsResult.children
: [statsResult];
if (this.taskConfig.printStats) {
const duration: number = new Date().getTime() - startTime;
const statsResultChildren: Webpack.StatsCompilation[] = statsResult.children
? statsResult.children
: [statsResult];
for (const child of statsResultChildren) {
if (child.chunks) {
for (const chunk of child.chunks) {
if (chunk.files) {
for (const file of chunk.files) {
this.log(
`Bundled: '${colors.cyan(path.basename(file))}', ` +
`size: ${colors.magenta(chunk.size.toString())} bytes, ` +
`took ${colors.magenta(duration.toString(10))} ms.`
);
}
for (const child of statsResultChildren) {
if (child.chunks) {
for (const chunk of child.chunks) {
if (chunk.files) {
for (const file of chunk.files) {
this.log(
`Bundled: '${colors.cyan(path.basename(file))}', ` +
`size: ${colors.magenta(chunk.size.toString())} bytes, ` +
`took ${colors.magenta(duration.toString(10))} ms.`
);
}
}
}
}
}
}
}
completeCallback();
}); // endwebpack callback
}
completeCallback();
}); // endwebpack callback
}
}
private _logMissingConfigWarning(): void {
this.logWarning(
'No webpack config has been provided. ' +
'Run again using --initwebpack to create a default config, ' +
'Create a webpack.config.js file ' +
`or call webpack.setConfig({ configPath: null }) in your gulpfile.`
);
}

Просмотреть файл

@ -1,62 +0,0 @@
// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
// See LICENSE in the project root for license information.
import * as Webpack from 'webpack';
// @ts-ignore
import * as WebpackDevServer from 'webpack-dev-server'; // eslint-disable-line
import { WebpackTask } from './WebpackTask';
import * as path from 'path';
// Note: this require may need to be fixed to point to the build that exports the gulp-core-build-webpack instance.
const webpackTask: WebpackTask = require('@microsoft/web-library-build').webpack;
const webpack: typeof Webpack = webpackTask.resources.webpack;
const isProduction: boolean = webpackTask.buildConfig.production;
// eslint-disable-next-line
const packageJSON: { name: string } = require('./package.json');
const webpackConfiguration: Webpack.Configuration = {
context: __dirname,
devtool: isProduction ? undefined : 'source-map',
entry: {
[packageJSON.name]: path.join(__dirname, webpackTask.buildConfig.libFolder, 'index.js')
},
output: {
libraryTarget: 'umd',
path: path.join(__dirname, webpackTask.buildConfig.distFolder),
filename: `[name]${isProduction ? '.min' : ''}.js`
},
// The typings are missing the "object" option here (https://webpack.js.org/configuration/externals/#object)
externals: {
react: {
amd: 'react',
commonjs: 'react'
},
'react-dom': {
amd: 'react-dom',
commonjs: 'react-dom'
}
} as any, // eslint-disable-line @typescript-eslint/no-explicit-any
plugins: [
// new WebpackNotifierPlugin()
]
};
if (isProduction && webpackConfiguration.plugins) {
webpackConfiguration.plugins.push(
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
dead_code: true,
warnings: false
}
})
);
}
exports = webpackConfiguration;

Просмотреть файл

@ -1,3 +1,6 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json"
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json",
"compilerOptions": {
"skipLibCheck": true
}
}

Просмотреть файл

@ -1,3 +1,6 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json"
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-node.json",
"compilerOptions": {
"skipLibCheck": true
}
}