如何选择与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风格。
问题:
- 我可以指定我优先考虑我的
dist
的node_modules
文件夹的ES5版本吗?也许在我的webpack.config或package.json
? - 如何选择正确的
node_modules/.../dist/
文件夹?
- 我是否可以为node_modules指定我喜欢ES5版本的dist文件夹?也许在我的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的主要内容,如果未能解决你的问题,请参考以下文章
与 webpack 捆绑时如何使 node.js 在没有 node_modules 的情况下工作?
如何让 Webpack 和 Typescript 使用外部 node_module 文件夹?
如何使用捆绑包中的 node_modules 依赖项正确构建用于生产的 NestJS 应用程序?
带有 NestJS + Typescript + Webpack + node_modules 的单个文件包