如何使用Webpack和Babel将forEach循环转换为for循环?

时间:2019-03-25 11:57:07

标签: javascript webpack babel

我正在一个相对较小的网站上工作,我想使用诸如forEach-loops之类的JavaScript功能,但另一方面,它支持未实现最新JS功能的浏览器。因此,我设置了Webpack和Babel。到目前为止,一切都很好。捆绑工作,并且将例如let和const转换为var。但它不会将forE-loop转换为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移植代码的任何建议?

0 个答案:

没有答案