Как преобразовать forEach-циклы в цикл for с помощью Webpack и Babel? - PullRequest
Новая
       15

Как преобразовать forEach-циклы в цикл for с помощью Webpack и Babel?

0 голосов
/ 25 марта 2019

Я работаю на относительно небольшом веб-сайте и хочу использовать функции JavaScript, такие как forEach-loop, но с другой стороны поддерживаю браузеры, в которых не реализованы новейшие функции JS.Поэтому я настроил Webpack и Babel.Все идет нормально.Связка работает и переносится, например, let и const в var.Но он не переносит циклы forEach в циклы for.Я провел много исследований, но мне кажется, что существует множество версий и разных способов, как это сделать, и пока ничего не получилось.

Вот мои настройки:

package.json 

{
  "name": "jkk-onepager",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "http://****"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-syntax-flow": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^4.29.6",
    "webpack-dev-server": "^3.2.1"
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "webpack-cli": "^3.2.3"
  }
}

webpack.config.json 

    const path = require('path');


    module.exports = {
      entry: {
        app: "./_assets/js/src/main.js"
      },
      mode: "development",
      output: {
        path: path.resolve(__dirname, "_assets/js/build"),
        filename: "bundle.js"
      },
      module: {
        rules: [{
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
          query: {
            presets: ["@babel/preset-env"]
          }
        }]
      }
    }

.babelrc 

{
  "presets": [
    ["env", { // I have also tried @babel/preset-env
      "targets": {
        "browsers": [
          "Chrome >= 52",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11",
          "last 4 Edge versions"
        ]
      }
    }],
    "es2015",
    "stage-1"
  ],

  "ignore": [
    "node_modules"
  ],
  "plugins": [
    "syntax-flow",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-object-rest-spread",
    "transform-flow-strip-types",
    "syntax-class-properties"
  ]
}

Когда я запускаю npm run build, я получаю это сообщение об ошибке:

ERROR in ./_assets/js/src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

Есть идеи, как это решить?Или какой-нибудь совет, как передать код для IE11?

...