github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-23 01:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update aspnet-webpack-react to support Webpack 2.x-style configs

Browse Source
This commit is contained in:
SteveSandersonMS
2017-01-27 11:18:26 +00:00
parent a9bc1201d1
commit 345b4f64b5
2 changed files with 51 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack-react/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "aspnet-webpack-react",
"version": "1.0.3",
"version": "1.0.4",
"description": "Helpers for using Webpack with React in ASP.NET Core projects. Works in conjunction with the Microsoft.AspNetCore.SpaServices NuGet package.",
"main": "index.js",
"scripts": {
@@ -26,7 +26,7 @@
"react-transform-hmr": "^1.0.4"
},
"devDependencies": {
"@types/webpack": "^1.12.34",
"@types/webpack": "^2.2.0",
"rimraf": "^2.5.4",
"typescript": "^2.0.0",
"webpack": "^1.12.14"

57
src/Microsoft.AspNetCore.SpaServices/npm/aspnet-webpack-react/src/HotModuleReplacement.ts
View File

@@ -1,17 +1,58 @@
import * as webpack from 'webpack';
type OldOrNewModule = webpack.OldModule & webpack.NewModule;
export function addReactHotModuleReplacementBabelTransform(webpackConfig: webpack.Configuration) {
const moduleRules: webpack.Loader[] =
(webpackConfig.module as any).rules // Webpack < 2.1.0 beta 23
|| webpackConfig.module.loaders; // Webpack >= 2.1.0 beta 23
const moduleConfig = webpackConfig.module as OldOrNewModule;
const moduleRules = moduleConfig.rules // Webpack >= 2.1.0 beta 23
|| moduleConfig.loaders; // Legacy/back-compat
if (!moduleRules) {
return; // Unknown rules list format
}
moduleRules.forEach(loaderConfig => {
if (loaderConfig.loader && loaderConfig.loader.match(/\bbabel-loader\b/)) {
// Ensure the babel-loader options includes a 'query'
const query = loaderConfig.query = loaderConfig.query || {};
moduleRules.forEach(rule => {
// Allow rules/loaders entries to be either { loader: ... } or { use: ... }
// Ignore other config formats (too many combinations to support them all)
let loaderConfig =
(rule as webpack.NewUseRule).use // Recommended config format for Webpack 2.x
|| (rule as webpack.LoaderRule).loader; // Typical config format for Webpack 1.x
if (!loaderConfig) {
return; // Not a supported rule format (e.g., an array)
}
// Allow use/loader values to be either { loader: 'name' } or 'name'
// We don't need to support other possible ways of specifying loaders (e.g., arrays),
// so skip unrecognized formats.
const loaderNameString =
(loaderConfig as (webpack.OldLoader | webpack.NewLoader)).loader
|| (loaderConfig as string);
if (!loaderNameString || (typeof loaderNameString !== 'string')) {
return; // Not a supported loader format (e.g., an array)
}
// Find the babel-loader entry
if (loaderNameString.match(/\bbabel-loader\b/)) {
// If the rule is of the form { use: 'name' }, then replace it
// with { use: { loader: 'name' }} so we can attach options
if ((rule as webpack.NewUseRule).use && typeof loaderConfig === 'string') {
loaderConfig = (rule as webpack.NewUseRule).use = { loader: loaderConfig };
}
const configItemWithOptions = typeof loaderConfig === 'string'
? rule // The rule is of the form { loader: 'name' }, so put options on the rule
: loaderConfig; // The rule is of the form { use/loader: { loader: 'name' }}, so put options on the use/loader
// Ensure the config has an 'options' (or a legacy 'query')
let optionsObject =
(configItemWithOptions as webpack.NewLoader).options // Recommended config format for Webpack 2.x
|| (configItemWithOptions as webpack.OldLoaderRule).query; // Legacy
if (!optionsObject) {
// If neither options nor query was set, define a new value,
// using the legacy format ('query') for compatibility with Webpack 1.x
optionsObject = (configItemWithOptions as webpack.OldLoaderRule).query = {};
}
// Ensure Babel plugins includes 'react-transform'
const plugins = query['plugins'] = query['plugins'] || [];
const plugins = optionsObject['plugins'] = optionsObject['plugins'] || [];
const hasReactTransform = plugins.some(p => p && p[0] === 'react-transform');
if (!hasReactTransform) {
plugins.push(['react-transform', {}]);