Как включить импортируемый класс в комплект, если он не используется напрямую

Question

Я пишу свою собственную прагму JSX, и она работает довольно хорошо, за исключением случаев, когда привязка к вводу машинописного текста JSX не будет работать для меня.Мой класс вытряхивают из дерева или что-то в этом роде, если только он активно не используется в модуле, например, в операторе журнала:

/** @jsx V.create */
/** @jsxFrag V.Fragment */
import V, { render } from "@V"; // `@V` is in a webpack resolve.alias

render(document.getElementById("app"), <h1>hi</h1>);

external "V":1 Uncaught ReferenceError: V is not defined

Но,

/** @jsx V.create */
/** @jsxFrag V.Fragment */
import V, { render } from "@V"; // `@V` is in a webpack resolve.alias
console.log({ V })
render(document.getElementById("app"), <h1>hi</h1>);

^^ Works!

Соответствующий объект веб-пакета:

{
  test: /\.(js|jsx|ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader"
  }
}

tsconfig.json

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "esnext",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true
  },
  "baseUrl": "src",
  "paths": {
    "@V": ["js/V/index.ts"]
  }
}

Как я могу обеспечить Webpack / Typescriptне удалит этот импорт?

Answer 1

Вам необходимо отключить расшатывание дерева для модуля V.

Вы можете использовать массив sideEffects, чтобы отключить расшатывание дерева

Здесь документация WebPack

В вашем файле package.json

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}