Проблема:
После того, как я обновил AJV.js до Версии 6.4, мой комплект поставки включает версию ESNEXT "uri-js" вместо версии ES5, что нарушает совместимость IE11.
Анализ:
Я подумал, что этот AJV ссылается на uri-js с помощью вызова require('uri-js') и что uri-js поставляется в двух вариантах:
/node_modules/uri-js/dist/:
По какой-то причине Webpack (V 4.8) связывает «esnext» вариант uri-js в мой пакет поставщика вместо использования «es5». Я не смог найти, как / где я должен указать, что моя предпочтительная цель сборки:
Вот мой 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 ....
}
}
Я понимаю, что мой собственный код передается в ES5 с помощью компилятора TypeScript (V 2.8). Но как насчет node_modules? Особенно тот, который уже поставляет версию ES5 в своей папке dist?
Если это имеет значение, мой 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"
]
}
Я также думал о включении Babel для понижения всех узловых модулей до ES5, но для меня это звучит излишне, особенно если учесть, что модули уже включили версии ES5.
Вопросы:
Могу ли я указать, что я предпочитаю версию ES5 для папки dist для моего node_modules? Может быть, в моем webpack.config или в package.json?
Как работает выбор нужных node_modules/.../dist/ папок?