Как скомпилировать зависимости из node_modules через Babel - PullRequest
Новая
       111

Как скомпилировать зависимости из node_modules через Babel

0 голосов
/ 23 апреля 2020

Я разрабатываю некоторую библиотеку пользовательского интерфейса, и она должна быть скомпилирована в ES5 через babel, чтобы получить папку dist (whatever), которая содержит готовые к использованию модули / компоненты в формате ES5 (общий. js). Потому что это будет зависеть от node_modules какого-либо другого проекта и в основном не должно компилироваться через webpack / babel / parcel, et c. потому что они игнорируют node_modules по умолчанию.

Моя библиотека пользовательского интерфейса работает с Webpack, Babel и Typescript. Webpack запускает проект на сервере dev и использует Babel для разрешения зависимостей node_modules ES6 и TS для разрешения моих собственных компонентов.

Я обнаружил, что мне нужно использовать Babel, только если я хочу скомпилировать компоненты в ES5 без их объединения ( Webpack просто объединяет все в один файл. По сути, я могу настроить 2,3 выходных файла, но это все равно плохо)

Проблема в том, что моя библиотека пользовательского интерфейса имеет некоторые зависимости в node_modules, и эти зависимости не являются ES5. Поэтому я вручную добавил их в конфигурацию babel, чтобы иметь возможность запускать проект на сервере разработчика через веб-пакет. Это работает как чудо, но когда я попытался compile этих компонентов через babel, я увидел, что он ничего не делает с зависимостями node_modules. И когда я включил скомпилированную библиотеку в другой проект, она перестала работать, потому что мой внешний проект, использующий скомпилированную библиотеку, в принципе не может обработать ES6, как в node_modules скомпилированной библиотеки. Позвольте мне визуализировать это: 

Lib
 - components
 - node_modules
    - ES6 dependency

Outer Project
 - node_modules
    - Lib
     - components
     - node_modules
       - ES6 dependency
It fails when I try to run the Outer Project because it expects node_modules to be es5

Как я могу справиться с этим? По сути, было бы неплохо, если бы babel извлек эти зависимости и скомпилировал их в некоторый внешний файл с ES5, et c. Как я могу это сделать?

Вот мой конфиг babel 

const path = require('path');

module.exports = function (api) {
  api.cache(true);
  return {
    sourceMaps: true,

    include: [
      path.resolve('src'),
      path.resolve('node_modules/react-native-material-textfield'),

      path.resolve('node_modules/native-base-shoutem-theme'),
      path.resolve('node_modules/react-navigation'),
      path.resolve('node_modules/react-native-easy-grid'),
      path.resolve('node_modules/react-native-drawer'),
      path.resolve('node_modules/react-native-safe-area-view'),
      path.resolve('node_modules/react-native-vector-icons'),
      path.resolve('node_modules/react-native-keyboard-aware-scroll-view'),
      path.resolve('node_modules/react-native-web'),
      path.resolve('node_modules/react-native-tab-view'),
      path.resolve('node_modules/static-container'),
      path.resolve('node_modules/react-native-animatable'),
    ],
    presets: [
      'module:metro-react-native-babel-preset',
      '@babel/preset-env',
      '@babel/preset-react',
      '@babel/preset-flow',
      '@babel/preset-typescript',
    ],
    plugins: ['react-native-web', '@babel/plugin-proposal-class-properties'],
    env: {
      production: {},
      development: {},
    },
  };
};

Конфигурация Typescript 

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

Спасибо за любую помощь!

...