我正在尝试让Babel + Webpack为IE11和Safari 10转换我的文件。无论我做什么，我都无法使其正常工作。
我尝试卸载并重新安装webpack和babel。我已经尝试更改webpack.config.js和.babelrc中的所有内容。我尝试制作babel.config.js和webpack.config.babel.js。
我尝试跑步
npx babel node_modules/vuetify --plugins=@babel/plugin-transform-spread,@babel/plugin-transform-parameters --presets=@babel/preset-env --no-babelrc
并在扩展运算符仍在内部时输出。
我尝试使用webpack进行编译，并且仍然存在散布运算符。
package.json
{
"name": "aspnetcore-vuejs-typescript-template",
"version": "0.1.0",
"main": "app.js",
"license": "MIT",
"author": "Danijel Hrcek",
"scripts": {
"dev": "./node_modules/.bin/webpack-cli --mode development --watch --progress --config webpack.config.js",
"build:dev": "./node_modules/.bin/webpack-cli --mode development --config webpack.config.js",
"build:prod": "./node_modules/.bin/webpack-cli --mode production --config webpack.config.js",
"publish": "npm install && ./node_modules/.bin/webpack-cli --mode production --config webpack.config.js && dotnet publish --configuration Release",
"test": "jest"
},
"dependencies": {
"acorn": "^7.0.0",
"apexcharts": "^3.8.5",
"axios": "^0.19.0",
"bulma": "0.7.5",
"bulmaswatch": "0.7.2",
"classlist-polyfill": "^1.2.0",
"core-js": "^3.2.1",
"fibers": "^3.1.1",
"portal-vue": "^2.1.6",
"regenerator-runtime": "^0.13.3",
"vue": "2.6.10",
"vue-apexcharts": "^1.4.0",
"vue-flatpickr-component": "8.1.2",
"vue-multiselect": "2.1.6",
"vue-notification": "1.3.16",
"vue-router": "3.0.6",
"vue2-animate": "^2.1.1",
"vuetify": "^2.0.5",
"vuetify-loader": "^1.3.0",
"vuex": "3.1.1"
},
"devDependencies": {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-transform-spread": "^7.2.2",
"@babel/preset-env": "^7.5.5",
"@babel/register": "^7.5.5",
"@mdi/font": "^3.9.97",
"@types/jquery": "3.3.29",
"@types/node": "12.0.2",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.0",
"@vue/test-utils": "1.0.0-beta.29",
"aspnet-webpack": "3.0.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "2.0.2",
"compression-webpack-plugin": "2.0.0",
"css-loader": "2.1.0",
"deepmerge": "^4.0.0",
"es6-promise-promise": "1.0.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "3.0.1",
"html-webpack-plugin": "3.2.0",
"jest": "24.8.0",
"jest-serializer-vue": "2.0.2",
"node-sass": "4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"resolve-url-loader": "3.1.0",
"sass": "^1.22.9",
"sass-loader": "^7.1.0",
"style-loader": "0.23.1",
"ts-loader": "^6.0.1",
"typescript": "^3.4.5",
"url-loader": "1.1.2",
"vue-class-component": "7.1.0",
"vue-jest": "3.0.4",
"vue-loader": "15.7.0",
"vue-property-decorator": "8.1.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "3.3.2",
"webpack-dev-server": "3.4.1",
"webpack-hot-middleware": "2.25.0"
}
"browserslist": [
"defaults", "safari 10", "not ie <= 10"
]
}
.babelrc
{
"presets": [ "@babel/preset-env" ],
"plugins": [ "@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread", "@vue/babel-preset-jsx", "@babel/plugin-transform-parameters" ]
}
在webpack.config.js中
{
test: /\.m?js$/,
exclude: /node_modules\/(?!(vuetify|vuetify-loader|vue)\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread"]
}
}
},
{
test: /\.jsx?$/,
include: [
'/node_modules/vuetify/src'
],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread", "@vue/babel-preset-jsx", "@babel/plugin-transform-parameters"]
}
}
},
预期输出：
function mixins() {
//emulates spread operator
}
实际输出：
function mixins(...args) {}
答案 0 :(得分：1)
FWIW 我认为自从提出问题以来这已经解决了。创建一个包含以下文件的文件夹：
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"author": "RichN",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"webpack": "^5.32.0",
"webpack-cli": "^4.6.0"
}
}
webpack.config.js
module.exports = {
devtool: "source-map",
mode: "development",
target: ["web", "es5"],
entry: "./app.js",
output: {
filename: "bundle.js",
path: __dirname
},
resolve: {
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: [
["@babel/preset-env", {
"targets": "defaults"
}]
],
plugins: [
"@babel/plugin-proposal-object-rest-spread"
]
}
}]
}
]
}
}
app.js
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3));
index.html
<!DOCTYPE html>
<body>
<script src="bundle.js"></script>
</body>
然后在该文件夹中发出命令 npm i 和 npx webpack。代码在 bundle.js 中被转换为以下代码：
function sum() {
for (var _len = arguments.length, theArgs = new Array(_len), _key = 0; _key < _len; _key++) {
theArgs[_key] = arguments[_key];
}
return theArgs.reduce(function (previous, current) {
return previous + current;
});
}
console.log(sum(1, 2, 3));
如果您现在将 index.html 作为文件加载到 Internet Explorer 中，此代码运行良好并在控制台窗口中输出 6