javascript - Cómo seleccionar la versión dist de node_modules para empacarla con webpack

Problema:

Después de actualizar AJV.js a la versión 6.4, mi paquete de proveedor incluye la versión ESNEXT de "uri-js" en lugar de la versión ES5, lo que rompe la compatibilidad con IE11.

Análisis:

Supuse que ese AJV se refiere a uri-js con una llamada require('uri-js') y que uri-js viene en dos versiones:

/node_modules/uri-js/dist/:

• es5
• esnext

Por alguna razón, Webpack (V 4.8) incluye la versión 'esnext' de uri-js en mi vendor-bundle en lugar de usar la 'es5'. No pude encontrar cómo/dónde tengo que especificar que mi objetivo de compilación preferido es.

Aquí está mi webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.tsx'
    },
    output: {
        filename: "js/[name].bundle.js",
        path: __dirname + "/dist"
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: "css-loader",
                        options: {
                            localIdentName: '[local]--[hash:5]',
                            sourceMap: true
                        }

                    }, {
                        loader: "less-loader",
                        options: {
                            sourceMap: true
                        }
                    }],
                    fallback: "style-loader",
                    publicPath: "../"
                }),
                exclude: "/node_modules/"
            },
            {
                test: /\.html$/,
                use: 'raw-loader'
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$/i,
                loader: "file-loader?name=assets/img/[name].[ext]"
            },
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                use: "file-loader?name=assets/[name].[ext]"
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "quino/style/style.css",
            allChunks: true
        }),
        new HtmlWebpackPlugin({
            template: "src/index.html",
            filename: "index.html"
        }),
        new CopyWebpackPlugin([])
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" }
            }
        }
    }
};

package.json:

{
  "name": "MyApp",
  "version": "1.0.0",
  "sideEffects": false,
  "description": "-",
  "private": false,
  "scripts": {
    "build": "webpack --config webpack.config.js --mode production",
    "dev": "webpack-dev-server --config webpack.config.js --host 0.0.0.0 --progress --colors --history-api-fallback --mode development"
  },
  "author": "Me",
  "license": "some",
  "devDependencies": {
   .... stuff ....
  },
  "dependencies": {
    .... stuff ....
    "ajv": "^6.4.0",
    .... more stuff ....
  }
}

Entiendo que mi propio código se transpila a ES5 usando el compilador de TypeScript (V 2.8). Pero, ¿qué pasa con los node_modules? Especialmente con aquellos que ya incluyen una versión ES5 dentro de su carpeta dist.

En caso de que importe, aquí está mi tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "dist/**",
    "./*.js",
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

También pensé en incluir Babel para degradar todos los node_modules a ES5, pero eso me parece un exceso, especialmente ya que los módulos ya incluyen versiones en ES5.

Preguntas:

1. ¿Puedo especificar que prefiero la versión ES5 de la carpeta dist para mis node_modules? ¿Quizás en mi webpack.config o en package.json?

2. ¿Cómo funciona la selección de las carpetas correctas node_modules/.../dist/?

Respuesta #1

1. ¿Puedo especificar que prefiero la versión ES5 de la carpeta dist para mis node_modules? ¿Quizás en mi webpack.config o en package.json?

Según entiendo, no hay una manera común de manejar diferentes variantes (por ejemplo, ES5, ESNEXT, etc.) del mismo paquete de NPM. Cada paquete tiene su propia manera de hacer las cosas. Por lo tanto, no hay una forma general de elegirlas. En cambio, uno tiene que incorporar cosas en su ejecutor de tareas (Gulp, Webpack, Grunt, etc.) para solucionar los problemas que surjan.

2. ¿Cómo funciona la selección de las carpetas node_modules/.../dist/ correctas?

Un paquete NPM contiene un package.json. Dentro de este archivo hay un campo main que especifica qué incluir/usarse en tu aplicación o qué selecciona el bundler, etc. Si no existe un valor main, se usará index.js como predeterminado.

El resto del proceso de selección es específico del paquete. Esto también se aplica a la estructura de carpetas de un paquete. Algunos usan /dist/.. para diferentes variantes, otros envían versiones de depuración y producción en otras carpetas. Depende en gran medida de cada paquete cuáles archivos/versiones de archivos se utilizan.

No existe un sistema estandarizado como en los paquetes NuGet de .net la estructura de la carpeta lib/....

Lo que todavía no tengo claro es por qué se selecciona la versión ESNEXT de URL-JS, ya que URL-JS apunta a su versión ES5. Trabajando en esto ;-