How to use webpack 4 JSON tree-shaking feature with keys containing the character “-”?

问题

I would like to use webpack 4's JSON tree-shaking feature but I am hitting a roadblock.

This is some working code:

import { accessibility_16 } from '@collab-ui/icons/data/iconsData.json';

console.log("accessibility_16:", accessibility_16);

iconsData.json is a HUGE file, but thanks to webpack I only get the code related to accessibility_16 in the final bundle (when using webpack -p). The issue is that some keys in the JSON file are not valid JavaScript identifiers, example: arrow-circle-down_16.

import { arrow-circle-down_16 } from '@collab-ui/icons/data/iconsData.json';

The code above is invalid.

How can I import arrow-circle-down_16 and still benefit from JSON tree-shaking?

Thanks!

回答1:

I have found how to write code to do what I want thanks to this GitHub issue but I am not certain that it's future-proof:

import * as json from "@collab-ui/icons/data/iconsData.json";
const path = json["arrow-circle-down_16"];
console.log("arrow-circle-down_16:", path);

来源：https://stackoverflow.com/questions/51769126/how-to-use-webpack-4-json-tree-shaking-feature-with-keys-containing-the-characte