플러그인을 사용해도 babel이 확산 연산자를 전치하도록 가져올 수 없습니다.

플러그인을 사용해도 babel이 확산 연산자를 전치하도록 가져올 수 없습니다.

Babel+Webpack을 IE11과 Safari 10용으로 변환하려고 합니다.나는 무엇을 해도 잘 되지 않는다.

Web Pack과 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

내부에 분산 연산자가 남아 있는 상태로 출력됩니다.

웹팩으로 컴파일을 해보니 아직 확산 연산자가 있습니다.

패키지.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) {}

FWIW 질문이 있은 후 이 문제는 해결되었다고 생각합니다.다음과 같이 파일이 있는 폴더를 만듭니다.

패키지.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.syslog

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.module

function sum(...theArgs) {
    return theArgs.reduce((previous, current) => {
        return previous + current;
    });
}
console.log(sum(1, 2, 3));

index.displaces를 표시합니다.

<!DOCTYPE html>
<body>
    <script src="bundle.js"></script>
</body>

그런 다음 명령어를 발행합니다.npm i그리고.npx webpack그 폴더 안에.코드는 번들 형식으로 다음 코드로 변환됩니다.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));

Internet Explorer에서 index.html을 파일로 로드하면 이 코드가 정상적으로 실행되어 콘솔창에 6이 출력됩니다.

언급URL : https://stackoverflow.com/questions/57774962/cant-get-babel-to-transpile-spread-operator-even-with-plugin