Отличный вопрос.
Создание надстроек Office.js - или даже просто современного веб-сайта в целом, а надстройки Office.js - это просто веб-сайт плюс манифест - это, безусловно, большеучастие, чем создание проекта VBA / VSTO. Таким образом, чтобы установить ожидания, будет кривой обучения.
В зависимости от вашего уровня комфорта с веб-технологиями - и вашей готовности учиться Реагируйте, если вы еще не знаете, -- Я бы определенно рекомендовал пойти по пути использования Yo Office или Create React App. Оба из них попадают во второй лагерь - использовать что-то ("yo" или CRA) для создания проекта, который вы будете использовать с VS Code, вместо того, чтобы начинать с шаблонов проектов надстроек Office в VisualStudio (которые на данный момент немного устарели и не так легко подходят для современных веб-технологий, таких как React). Однако вы все равно будете использовать Visual Studio для отладки. Опыт не на 100% беспроблемный, но и неплохой. Например, надстройка Script Lab (https://aka.ms/scriptlab) была разработана именно таким образом.
В последний раз я проверил "yo office" - даже если вы выбрали "React" в качестве опции -- я все еще создавал свой собственный проект, а не использовал структуру create-реагировать на приложение. Лично я предпочитаю CRA из-за его структуры проекта и его упрощенных зависимостей и конфигурации (без настройки веб-пакета и т. д.). Это довольно легкопреобразуйте приложение CRA в надстройку Office, по крайней мере, для обычных надстроек панели задач (пользовательские функции - это отдельная история, и для этого вам, вероятно, все еще потребуется сохранить структуру и сценарии «yo office»).
Если вы заинтересованы в том, чтобы пойти по пути создания-реакции-приложения и Office.js-ify, выполните следующие действия:
Начните с инструкций CRA, выбирая TypeScriptoption (дополнительная информация на https://create -react-app.dev / docs / добавление-typescript )
Помимо того, что он генерирует, вы можете пойти дальше и добавить Fabric React (дляПользовательский интерфейс), а также любые другие библиотеки. Если вы хотите узнать, что использует Script Lab, см. https://github.com/OfficeDev/script-lab/blob/master/packages/editor/package.json,, хотя это может быть немного ошеломляюще. Самая полезная супер-простая библиотека, которая является отличным «ударом за доллар», - это styled-components, которая упрощает написание вашего пользовательского интерфейса, позволяя существенно встроить CSS в ваш JS / React очень простым способом. Script Lab также использует Redux и связанные с ним библиотеки (typesafe-actions, redux-saga, reselect), которые полезны после их настройки, но могут быть излишними для вас (особенно если вы изучаете это по ходу дела),Так что сейчас я бы придерживался только базовых типизированных типов create-реагировать-приложение + Fabric React + опционально стилизованные компоненты и назвал бы это хорошо.
Как только у вас есть функциональный веб-сайт, как вы переходите с веб-сайта надобавить в? Ну, во-первых, вы добавляете ссылку на CDN в Office.js (см. https://docs.microsoft.com/en-us/office/dev/add-ins/develop/referencing-the-javascript-api-for-office-library-from-its-cdn).. Обратите внимание, что даже для остальной части вашего проекта будет использоваться современный модульный JavaScript (и, следовательно, операторы импорта и т. Д.), Для OfficeСсылка .js, вы будете использовать тег script. Вам также понадобится "npm install --save-dev @ types / office-js", чтобы получить последние определения TypeScript для Office. И, говоря о JS, где-то в вашемЗагрузите логику (например, что бы ни оборачивало ReactDOM.render), добавьте вызов «Office.onReady ()» - см. https://docs.microsoft.com/en-us/office/dev/add-ins/develop/understanding-the-javascript-api-for-office#initialize-with-officeonready для получения дополнительной информации.
Обратите внимание, что при добавлении «Office.onReady ", вы можете столкнуться с проблемой времени компиляции с жалобой на" no-undef ". В качестве обходного пути просто поместите комментарий" / * global Excel, Office * / "в файл JS, на который он жалуется, и все такоебудет магически работать. (Подробнее здесь: https://github.com/OfficeDev/office-js-docs-pr/issues/691)
Затем вам нужно будет создать / добавить манифест Office (XML-файл, описывающий URL вашего сайта, расположение кнопок ленты и т. Д.). Работать с файлом довольно сложно, но хорошая новость заключается в том, что вам не нужно слишком часто к нему прикасаться. Вы можете использовать файл, аналогичный тому, который генерирует ваш офис, корректируя пути (например, к изображениям) по мере необходимости. Скорее всего, у вас будет два или более манифеста, один для локального хоста и один для вашей производственной среды ... но вы можете начать только с локального хоста.
После того, как вы создали манифест, вы захотитезагрузить его в офис. Для настольных компьютеров используйте инструкции по https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins. Для Office Online используйте https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing. Для Mac используйте инструкции по https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac. Если не удается загрузить, это означает, что у вас есть проблемав манифесте, который происходит постоянно - это очень придирчивый формат. В этом случае см. Шаги по устранению неполадок в https://docs.microsoft.com/en-us/office/dev/add-ins/testing/troubleshoot-manifest.
В примечании, я удивлен (и жаль слышать), что вы пытались связаться со мной по электронной почте и не сделалине получить ответ. Я не помню, чтобы видел электронное письмо - если бы я это сделал, я бы ответил на него (по крайней мере, с помощью короткого ответа, перенаправляющего вас на StackOverflow :-)). Это первое, что я услышал об электронном письме, которое мне не пришло. Может попробовать еще раз? И я тоже проверю свою папку со спамом в ближайшие несколько дней, чтобы убедиться, что ваше новое письмо не попало туда ...
Best!
~ Michael