Javascript 如何使网页包仅为特定版本导入多边形填充?
我刚刚设法让webpack创建了两个分离版本,一个用于es5,另一个用于es6。 请参见下面的配置文件:Javascript 如何使网页包仅为特定版本导入多边形填充?,javascript,webpack,polyfills,babel-polyfill,Javascript,Webpack,Polyfills,Babel Polyfill,我刚刚设法让webpack创建了两个分离版本,一个用于es5,另一个用于es6。 请参见下面的配置文件: const path = require("path"); const common = require("./webpack.common"); const merge = require("webpack-merge"); const CleanWebpackPlugin = require("clean-webpa
const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const es5Config = merge(common,{
mode: "production",
output: {
filename: "[name].[contentHash].bundle.es5.js",
path: path.resolve(__dirname, "dist")
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin(),
new HtmlWebpackPlugin({
template: "./src/template.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
}),
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, //3. Extract css into files
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
modules: false,
useBuiltIns: 'entry',
targets: {
browsers: [
"IE 11"
],
},
}],
],
},
},
}],
},
});
const es6Config = merge(common, {
mode: "production",
output: {
filename: "[name].[contentHash].bundle.es6.js",
path: path.resolve(__dirname, "dist")
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin(),
new HtmlWebpackPlugin({
template: "./src/template.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
}),
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, //3. Extract css into files
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
modules: false,
useBuiltIns: "usage",
targets: {
browsers: [
'Chrome >= 60',
'Safari >= 10.1',
'iOS >= 10.3',
'Firefox >= 54',
'Edge >= 15',
],
},
}],
],
},
},
}],
},
});
module.exports = [es5Config, es6Config];
现在的问题是,我希望webpack仅为es5构建导入polyfills。而use usebuilins设置为usage则无法填充任何内容
我可能用错了吗?可能与node_模块包有关
所以我只是在主文件中导入多边形填充,如:
import "core-js/stable";
import "regenerator-runtime/runtime";
如何使这些导入仅为es5构建添加?或者如何从网页包中包含多边形填充/导入
还有一个额外的问题,如果有人知道,我如何正确地使用带有“用法”的usebuiltins?因为到目前为止,即使为我的主文件添加了polifylls,例如,我仍然会在IE11中得到符号错误。我发现了。以下是网页包配置: 常见的: 产品: babel.config.json:
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": true,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
因此,这与cdn polyfill相结合,仅为IE11加载polifylls。它也有自己的构造
这里唯一的问题是,结果输出将有单独的文件,es5构建应该在其所有脚本中都有nomodule。此外,对于es6,所有组件都应具有模块。
然后,我必须去手动添加那些我可以轻松制作自定义模板来处理的内容
但是后来polyfill的脚本被删除了,我仍然需要手动合并html文件。有人知道怎么处理吗
编辑:
1-对于属性,可以使用HtmlWebpackPlugin挂钩()或ScriptExtHtmlWebpackPlugin将属性放置在标记中
在这里找到一些带有钩子的代码:
const HtmlWebpackPlugin = require('html-webpack-plugin');
class es5TagTransformerHook {
apply (compiler) {
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
'es5TagTransformerHook', stacktraces
async (data, cb) => {
// Manipulate the content
// data.html += 'The Magic Footer'
// Tell webpack to move on
data.bodyTags.forEach(t=>t.tagName === 'script'?t.attributes.nomodule = true:null)
cb(null, data)
}
)
})
}
}
module.exports = es5TagTransformerHook
2-为了合并生成的html,我最终使用了以下要点:
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": true,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
const HtmlWebpackPlugin = require('html-webpack-plugin');
class es5TagTransformerHook {
apply (compiler) {
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(
'es5TagTransformerHook', stacktraces
async (data, cb) => {
// Manipulate the content
// data.html += 'The Magic Footer'
// Tell webpack to move on
data.bodyTags.forEach(t=>t.tagName === 'script'?t.attributes.nomodule = true:null)
cb(null, data)
}
)
})
}
}
module.exports = es5TagTransformerHook