Один проект с несколькими файлами package.json - PullRequest
Новая
       8

Один проект с несколькими файлами package.json

0 голосов
/ 22 мая 2018

Я относительно новичок в современной разработке JS, и мне нужна помощь или совет в этой ситуации.

Ситуация: У нас есть проект React-Typescript-Redux, поддерживающийIE8 (реакция 0,14).Сейчас мы выполняем обновление до IE11 и React 16. Но IE8 должен поддерживаться.

Требование: Сократить обслуживание проекта между версиями браузера, используя различные пакеты и / или файлы конфигурации для каждой сборки.

Проблема: Из проведенных мною исследований кажется невозможным использовать разные файлы package.json и папки node_modules внутри одного проекта с выбранными инструментами: npm, Webpack, React, Redux, Typescript.Кажется, что Yarn поддерживает несколько файлов package.json, но мы хотели бы избежать миграции с npm, если это возможно.

Текущая структура проекта: 

project_root/
  node_modules/
  src/
    components/
    utils/
    index.tsx
    components.css
  index.html
  package.json
  tsconfig.json
  webpack.config.json

Я думал, что может сработать, чтобы представить IE8вложенная папка со своими файлами package.json и node_modules, а затем как-то ссылаться на эту папку для задачи сборки, но теперь я не обращаю внимания на то, как указать npm ссылаться на нее при сборке.

Предлагаемая структура проекта: 

project_root/
  ie8/
   node_modules/
   package.json
  node_modules/
  src/
    components/
    utils/
    index.tsx
    components.css
  index.html
  package.json
  tsconfig.json
  webpack.config.json

Я пробовал разные вещи, найденные в сети, включая resolve.modules: [__dirname + "/ie8/node_modules"], но, похоже, это не работает, или я неправильно понимаю, что он делает, потому что я получаю Cannot find name 'require' ошибки в нескольких файлах, а Typescript 2.8.3 ссылается на вывод терминалавместо 2.3.4.Без этого проект собирается с конфигурацией для IE11.

Итак, кто-нибудь может с уверенностью сказать мне, что это невозможно, или предложить какое-то руководство? Это - самый близкий ответ, который я нашел до сих пор, но он не звучит окончательно.В качестве альтернативы, может ли структура проекта, подобная этой поддержке, что требуется, или лучше всего разделить проект на две части?

Заранее спасибо.

1 Ответ

0 голосов
/ 28 мая 2018

ОК, поэтому после еще одного исследования я наткнулся на Лерна , которая в основном позволяет мне делать то, что я хотел (из того, что я видел до сих пор).Для этого требуется специальная настройка дерева проекта, например: 

project_root/
  node_modules/
  packages/
    components/ // Components shared between projects
      components/
       MyComponent.jsx
      index.jsx

  legacy/
     output/
      build.js // React 0.14 build
     node_modules/
     package.json // project specific dependencies
     index.jsx // project specific entry
     .babelrc

  modern/
     output/
      build.js // React 16 build
     node_modules/
     package.json // project specific dependencies
     index.jsx // project specific entry
     .babelrc

  package.json // contains devDependencies shared between projects
  lerna.json
  webpack.config.js
  index.html

Затем в компоненте / index.jsx я указал команды для разных версий, основанные на глобальной переменной: 

if(PROJECT_SRC == "legacy"){
    React = require('../legacy/node_modules/react');
    ReactDOM = require('../legacy/node_modules/react-dom');
} else {
    React = require('../modern/node_modules/react');
    ReactDOM = require('../modern/node_modules/react-dom');
}

Примечание:Вероятно, это плохая практика, но в настоящий момент я могу включить в сборку разные версии React.Мне нужно будет посмотреть, какие проблемы возникают с этим подходом после того, как весь проект изменится на эту модель.

В webpack.config.js я настроил два экспорта - один для современного и один для старого.Каждый из них указывает на отдельную запись в файле index.jsx, использует webpack.DefinePlugin для установки глобальной переменной «legacy» или «modern» и указывает путь к модулю общих компонентов для разрешения: ['node_modules', path.resolve(__dirname, 'components')]

webpack.configдля одного проекта вывод выглядит примерно так: 

{
        entry: "./packages/legacy/index.jsx",
        target: "web", 
        output: 
        {
            filename: "build.js",
            path: __dirname + "/packages/legacy/dist/",
            libraryTarget: "var",
            library: "lib_name"
        },
        devtool: "source-map",
        resolve: {
            extensions: [".js", ".jsx", ".json"],
            modules: ['node_modules', path.resolve(__dirname, 'components')]
        },
        plugins: plugins_legacy,
        module: {
            loaders: [
                {
                    test: /\.jsx?$/,
                    loader: "babel-loader",
                    exclude: /node_modules/
                }
            ]
        }  
    }

Не стесняйтесь комментировать или указывать на проблемы, но я надеюсь, что это поможет кому-то в будущем!:)

...