Question

问题：

在我将AJV.js升级到版本6.4之后，我的供应商包包括“uri-js”ESNEXT版本而不是ES5版本，这打破了IE11的兼容性。

分析：

我认为AJV通过require('uri-js')电话引用了uri-js，并且 uri-js 有两种形式：

/node_modules/uri-js/dist/:

ES5
esnext

出于某种原因，Webpack（V 4.8）使用'es5'将uri-js的'esnext'风格捆绑到我的vendor-bundle中。我找不到如何/在哪里指定我的首选构建目标。

这是我的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 ....
  }
}

我明白使用TypeScript（V 2.8）编译器将我自己的代码转换为ES5。但是node_modules呢？特别是已经在他们的dist文件夹中发布ES5版本的那个？

如果这里重要的话我的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将所有node_modules降级为ES5，但这对我来说听起来有点过头了，特别是因为模块已经包含了ES5风格。

问题：

我是否可以指定为dist优先选择node_modules文件夹的ES5版本？也许在我的webpack.config或package.json？
如何选择正确的node_modules/.../dist/文件夹？

Answer 1

我是否可以指定我的node_modules的dist文件夹的ES5版本？也许在我的webpack.config或package.json？

据我所知，没有通用的方法来处理相同NPM包装的不同风味（例如ES5，ESNEXT等）。每个包都有自己的做事方式。所以没有一般选择方法。相反，必须将东西合并到你的任务运行员（Gulp，Webpack，Grunt等）中以解决出现的问题。

如何选择正确的node_modules /.../ dist /文件夹？

NPM包中包含package.json。在此文件中有一个main字段，用于指定在您的应用中包含/使用的内容或者捆绑商选择的内容等。如果不存在main值，则index.js将用作默认。

选择过程的其余部分是特定于包的。这也适用于包的文件夹结构。有些使用/dist/..用于不同的风格，有些用于在其他文件夹中提供调试和生产版本。高度依赖于每个包本身使用的文件/文件版本。

没有像.net Nuget那样的标准化系统打包lib/...文件夹的结构。

我仍然不确定的是，为什么ESNEXT版本的URL-JS被选中，因为URL-JS指向其ES5版本。正在研究这个; - ）

如何选择与webpack捆绑的node_modules dist flavor

1 个答案: