Как использовать собственный Require.js в SharePoint для загрузки модулей?

Прежде всего, если вы не знакомы с RequireJS, это решение на основе Javascript для загрузки файлов / модулей при необходимости, а также для управления зависимостями между ними. Одна из причин, по которой вы это читаете, заключается в том, что а) вы работаете с SharePoint б) у вас возникли проблемы с управлением большим количеством файлов js в вашем проекте и поиск способа упростить работу.
Какой бы ни была причина, вы пришли в нужное место.

После создания ряда клиентских решений в SharePoint и с появлением SharePoint Online (Office 365) возникает необходимость отказаться от отдельных громоздких файлов javascript и преобразовать их в модули. Вот где RequireJS решает ваши проблемы. Я полагаю, что разработчики по-прежнему будут внедрять свою собственную версию RequireJS в мастер-страницы / макеты страниц, чтобы начать с ней работать. Но в связи с недавними разработками настройка главной страницы ваших клиентов SharePoint не одобряется Microsoft, особенно из-за частых обновлений, получаемых онлайн-клиентами SharePoint. Есть способ загрузить RequireJS без необходимости добавлять ссылку на его cdn на ваших страницах. Я мог бы сказать это, потому что каждая страница SharePoint поставляется с этой строкой кода (вы можете просмотреть исходный код страницы, чтобы проверить себя),

<script type="text/javascript">
RegisterSod("require.js", "https:\u002f\u002fstatic.sharepointonline.com\u002fbld\u002f_layouts\u002f15\u002f16.0.6511.1205\u002frequire.js");
</script>

Метод RegisterSod не загружает require.js на вашу страницу, он просто регистрирует его как сценарий Ondemand, чтобы вы могли загрузить его, когда и если потребуется.

Итак, как загрузить файл, чтобы начать его использовать,

SP.SOD.executeFunc("require.js",null,function(){
 //callback executed when require.js is loaded
})

Вышеупомянутая функция загрузит require.js, и после загрузки файла будет выполнен обратный вызов. Вы можете попробовать это прямо сейчас в консоли инструментов разработчика (и вы должны войти в систему на любой странице sharepoint ;-)). Теперь, когда requirejs загружен на страницу, и если вы снова выполните приведенный выше код, он не выполнит обратный вызов. Удивительно, но факт. Давай, попробуй на своей консоли. Причина в том, что задача executeFunc - загрузить сценарий OnDemand, уведомить SharePoint, когда он это делает, и выполнить обратный вызов. Как только это будет сделано, и вы запустите тот же код, он не будет загружать файл, поскольку он уже был загружен, и, следовательно, обратный вызов не выполняется. Так что, если у меня на странице несколько веб-частей и нет способа узнать, какая из них будет выполнена первой, а я использовал executeFunc во всех веб-частях? К счастью, есть способ решить эту проблему.
Обычно, когда вы используете requirejs, у вас, вероятно, есть файл конфигурации, чтобы отслеживать все ваши модули и управлять зависимостями. Давайте создадим файл с именем require.config.js, который будет храниться в какой-нибудь библиотеке в SharePoint. Обычно это выглядит так,

requirejs.config({
    baseUrl: "/",
    paths: {
      'jquery':['https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min'],
      'knockout': ['https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min']
     
      },
    shim: {
        /* Set dependencies */
    'knockout'  :{
            deps: ['jquery']
             }
       
    },
    waitSeconds: 0
});

Нам всегда нужно загружать этот файл перед загрузкой любого из наших модулей, определенных в нем.

SP.SOD.executeFunc("require.js",null,function(){

  require(['pathToRequireConfig/require.config.js'],function(){
    
   })
})

Чтобы решить нашу проблему наличия нескольких блоков, зависящих от requirejs, мы должны добавить эту строку в наш require.config.js в конце,

SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("require.config.js");

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

SP.SOD.executeOrDelayUntilScriptLoaded(function(){
    require(['jquery'],function($){
         //Start using jquery
     });
}, 'require.config.js');

SP.SOD.executeOrDelayUntilScriptLoaded уведомит очередь SharePoint о том, что она ожидает загрузки файла, и SharePoint выполнит обратный вызов после загрузки require.config.js. Итак, наш файл require.config.js был загружен с помощью requirejs внутри блока SP.SOD.executeFunc и SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs («require.config.js»); который мы добавили в последнюю строку в require.config.js, уведомляет SharePoint о том, что файл был загружен, и просит выполнить все ожидающие задания, которые мы добавили с помощью SP.SOD.executeOrDelayUntilScriptLoaded.

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

Как использовать собственный Require.js в SharePoint для загрузки модулей?

Вопросы по теме