[javascript] require.js 에서 DataTables 로딩시 경로를 잘못 찾을때

관련지식
require.js, AMD, datatables

DataTables + bootstrap + select 를 사용할때 공식 가이드에서는 아래 4가지 javascript를 호출하라고 되어있습니다.

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js
https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js

가이드 : https://datatables.net/extensions/select/examples/styling/bootstrap4.html

그런데 require.js 를 이용하여 AMD 로딩을 할때는 위와 같은 순서로 호출되도록 지정해도 자꾸 엉뚱한 경로에서 js 파일을 로딩하려고 하는 경우가 있습니다.

아래 예는 실제로 /lib/datatables.net.js 로 설정했지만 다른 경로에서 로딩하려는 에러입니다.

require.js:1926 GET http://localhost:3000/XXX/xxx/lib/datatables.net.js
Uncaught Error: Script error for: datatables.net

이유는 DataTables 의 스크립트 안에서 고정된 모듈 이름을 사용하기 때문입니다. 따라서 require.js 에 설정할때 소스에 설정된 이름과 동일한 이름으로 설정해주어야 정상적으로 호출됩니다.

아래는 DataTables 에서 사용하는 모듈 이름들의 일부입니다. 파일명을 기준으로 모듈이름을 확인해서 각자의 설정에 이름을 동일하게 맞춰주면 됩니다. 하지만 dataTables는 버전이 워낙 많은 관계로 아래 목록외에 다른 이름도 존재합니다. 예를들어 select.bootstrap4.js의 소스를 열면 내부적으로 datatables.net-bs4 이름을 호출하고 있습니다. 따라서 만약 설정과 다르게 경로를 찾는 상황이 생긴다면 사용하는 js 파일의 내용을 열어서 이름을 확인하셔야 합니다.

'datatables' : 'datatables.min',
'datatables.net' : 'jquery.dataTables.min',
'datatables.net-bs' : 'dataTables.bootstrap.min',
'datatables.net-autofill' : 'dataTables.autoFill.min',
'datatables.net-editor' : 'dataTables.editor.min',
'datatables.net-buttons' : 'dataTables.buttons.min',
'datatables.net-buttons-bs' : 'buttons.bootstrap.min',
'datatables.net-colreorder' : 'dataTables.colReorder.min',
'datatables.net-rowreorder' : 'dataTables.rowReorder.min',
'datatables.net-scroller' : 'dataTables.scroller.min',
'datatables.net-select' : 'dataTables.select.min',
'datatables-editor-bootstrap' : 'editor.bootstrap.min',