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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何选择与webpack捆绑的node_modules dist flavor相关的知识,希望对你有一定的参考价值。

问题:

在我将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风格。

问题:

  1. 我可以指定我优先考虑我的distnode_modules文件夹的ES5版本吗?也许在我的webpack.config或package.json
  2. 如何选择正确的node_modules/.../dist/文件夹?
答案
  1. 我是否可以为node_modules指定我喜欢ES5版本的dist文件夹?也许在我的webpack.config或package.json中?

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

  1. 如何选择正确的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的主要内容,如果未能解决你的问题,请参考以下文章

与 webpack 捆绑时如何使 node.js 在没有 node_modules 的情况下工作?

如何让 Webpack 和 Typescript 使用外部 node_module 文件夹?

如何使用捆绑包中的 node_modules 依赖项正确构建用于生产的 NestJS 应用程序?

带有 NestJS + Typescript + Webpack + node_modules 的单个文件包

如何使用 Webpack 将供应商 CSS 文件捆绑到 React 应用程序中?

如何使用 webpack 模块捆绑器实现 react-date-range 选择器?