JSONata能否在Internet Explorer中运行？前端项目适配咨询

Hey there, let's break down your IE compatibility issue with JSONata.

First, the straight answer: JSONata does NOT work natively in Internet Explorer (especially IE11 and older). The reason is that JSONata relies heavily on ES6+ JavaScript features—like arrow functions, let/const, Promises, and modern array methods—that IE doesn't support. That's why you're seeing the "jsonata is undefined" error; IE can't parse the untranspiled ES6 code.

But don't worry, there are solid ways to get it working. Here's what you can do:

1. Use the Official ES5-Bundled Version of JSONata #

JSONata provides a pre-compiled ES5 version specifically for older browsers like IE. Instead of using the default ES6 build, locate and import the jsonata-es5.js file (usually found in the dist directory of the JSONata package).

If you're including it directly in your HTML, swap out your existing script tag for this one:

<script src="path/to/jsonata-es5.js"></script>

This version removes all ES6-specific syntax, so IE can parse it without issues.

2. Transpile JSONata with Babel (If Using a Build Tool) #

If you're using Webpack, Rollup, or another build system, you might need to configure Babel to transpile JSONata's code to ES5:

• Update your Babel config (e.g., .babelrc or babel.config.json) to target IE11:

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }]
    ]
  }
  

• Make sure your build tool isn't excluding node_modules/jsonata from transpilation. For Webpack, add an include rule to your Babel loader:

  module: {
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/jsonata')],
        use: 'babel-loader'
      }
    ]
  }
  

3. Add Required Polyfills #

Even with ES5 transpilation, IE11 lacks support for some modern JavaScript APIs that JSONata uses (like Promises or Array.prototype.includes). You'll need to add polyfills to fill these gaps:

• If using npm, install core-js and regenerator-runtime, then import them at the very top of your entry file:

  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  

• For a non-npm setup, download the polyfill files and include them via script tags before your JSONata script.

4. Test Thoroughly in IE #

After implementing these fixes, fire up IE11 and test your JSONata functionality end-to-end. Check the console for any remaining errors, and verify that parsing JSON and executing JSONata expressions works as expected.

内容的提问来源于stack exchange，提问作者Hugo Deudor