How to get babelify 10 to target a browser

问题

What I want is

To be using the latest versions of the libraries.
For it to run in IE 11.

I'm building a react app and in order to run the tests I need @testing-library/react. In order to run the tests in a browser I need browserify. In order to run the tests in every browser I support I need babelify. However no matter what I try the babelify does nothing (and IE 11 doesn't support ... or => syntax it generates).

Here's the relevant part of package.json (some dependencies are likely not needed):

      "dependencies": {
          "@babel/cli": "^7.8.4",
          "@babel/core": "^7.9.6",
          "@babel/plugin-proposal-class-properties": "^7.8.3",
          "@babel/plugin-transform-arrow-functions": "^7.8.3",
          "@babel/polyfill": "^7.8.7",
          "@babel/preset-env": "^7.9.6",
          "@babel/preset-react": "^7.9.4",
          "@testing-library/react": "^10.0.4",
          "babelify": "^10.0.0",
          "browserify": "^16.5.1",
          "react": "^16.13.1",
          "react-dom": "^16.13.1"
        },
        "browserslist": [
          "IE 11"
        ]

The code that looks like it should work:

    require('browserify')({
       entries: ['./node/ReactUtil.js']
    })
    .transform("babelify", {
       presets: [['@babel/preset-env', {"targets": {
          "browsers": ["ie < 8"]
       }}]]
    })
    .bundle()
    .pipe(fs.createWriteStream("javascript/generated/ReactUtil.js"));

I've tried the string babelify and require("babelify"). I've tried require("babelify").configure. I've tried having a file named babel.config.json, .babelrc, and .babelrc.json in the working directory. I've tried babel.config.js in the working directory (which has a different format). (The contents of these files have been excluded to prevent tl;dr).

The generated file isn't different (or is empty) and there's no error. The only thing that gave me an error was:

    .transform('babelify', {
       "presets": [
          [
             "env",  //Error: Cannot find module 'babel-preset-env'. Did you mean "@babel/env"?
             {
                "targets": {
                   "browsers": [
                      "ie < 8"
                   ]
                }
             }
          ]
       ]
    })

So I changed the "env" to "@babel/env" and babelify did nothing... The transform can't come after bundle or pipe and if I try running @babel/core after this (output a different file name) there's a race condition because browserify hasn't finished writing the file yet.

I wouldn't be totally opposed to switching tools but I figured that babelify should be able to work as expected. Maybe babelify doesn't support the newer versions I'm on? I couldn't find documentation for babelify targeting a browser and examples/other stack overflow are old or didn't work. There's too many possible combinations to try. Note that this works fine in Chrome so the browserify part is working fine.

来源：https://stackoverflow.com/questions/61844686/how-to-get-babelify-10-to-target-a-browser

标签

node.js

browserify

react-testing-library

babelify