How to connect third party polyfill (classlist-polyfill) in Babel?

  • 0
    the script.js file is processed by running Babel with npm run build

    here is the package.json code
    {
      "name": "video-order",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "babel": {
        "presets": [
          [
            "@babel/preset-env",
            {
              "targets": "> 0.25%, not dead"
            }
          ]
        ]
      },
      "scripts": {
        "build": "babel script -d dist"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/phillfeel/app_for_video-order.git"
      },
      "author": "",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/phillfeel/app_for_video-order/issues"
      },
      "homepage": "https://github.com/phillfeel/app_for_video-order#readme",
      "devDependencies": {
        "@babel/cli": "^7.11.6",
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "@babel/preset-es2015": "^7.0.0-beta.53"
      },
      "dependencies": {
        "classlist-polyfill": "^1.2.0"
      }
    }


    Please tell me where to add the dependency with "classlist-polyfill" so that Babel also uses this package.
    JavaScript Jace Ortega, Apr 8, 2019

  • 1 Answers
  • 0
    First, the classlist-polyfill is not a babel plugin, but it cannot be added to a babel.



    Secondly, the classlist polifill is a polyfill for the browser dom, not for js (the difference is that the dom is an api that can be interacted with using js launchers in the browser environment). Babel polyfills js, but not dom.



    Thirdly, in order for the dom polyfill to work in a browser, it must be run in that browser, for this it must be imported before the script that will use this polyfill. Babel is a transpiler, it does not concatenate js modules into one file, for this you need to use a webpack, rollup or some other bundler.



    To summarize, you first need to configure a webpack that will compile js modules into one file; then import the browser polyfill into script.js; then you need to run script.js through babel in order to get a polyfilled js (for example, a webpack does this, it collects scripts into one or several files, runs files through a transpiler).
    Gabriella Krueger

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!