[컴] webpack 에서 DataTable jquery plugin 사용하기

webpack 에서 DataTable jquery-plugin 사용하기

이것을 setting 하느라 여러가지로 골치아팠다. 그래서 좀 적어놓는다.

일단 요점은 3가지 정도이다.

1. npm install datatables.net : npm package 이름이 datatables 가 아니라 datatables.net 이다.
2. define=false 설정 : imports-loader 를 이용해서 DataTable 에 define = false 를 추가해줘야 한다. 이 녀석을 추가하면, AMD 가 아니라 CommonJS 부분을 사용하게 되는데, 이 부분을 사용해야 webpack 에서 'jquery' 를 판단해서 우리가 원하는 결과를 얻을 수 있다.
3. dt() : import 이후에 한 번 실행을 해줘야 한다. 그래야 module.export 부분이 수행되고, jquery 에 DataTable 이 추가된다. 이부분은 조금 혼란스럽다. 어떤 경우에는 이것이 없어야 되는 경우도 있다.

npm install datatables.net

처음에 그냥 npm install datatables 를 이용해서 설치하고 setting 을 했는데, 실패했다. package 가 틀려서 일지는 모르겠지만, 일단 DataTable homepage 에서 이야기하는 바로는 datatables.net 이 맞으니 이걸 사용하자.[ref. 1]

npm install datatables.net

define = false

이것을 하기위해서는 imports-loader 가 필요하다. 일단 설치를 하자.

npm install imports-loader

그리고, 이제 이 imports-loader 를 이용해서 아래 code 를 DataTable code 에 넣어줄 것이다.

var define=false;

방법은 아래 2가지이다.

1. webpack.config.js 의 loaders 설정 부분을 이용하는것
2. import 부분에 적어주는 것

첫번째 방법은 아래 code 를 webpack.config.js 에 추가해주면 된다. 개인적으로 2번째 방법을 선호해서 일단 1번째 방법은 그냥 넘기겠다.

loaders: [ {  test: /datatables\.net/, loader: 'imports?define=>false'}, ...]

두번째 방법은 import 할 때 loader 를 호출해서 넣어주는 방법이다. 아래처럼 작성하면 define=false 라는 code 가 datatables.net code 안에 들어간다.

import dt from 'imports?define=>false!datatables.net';

dt()

이제 사용을 해보자. 아래처럼 code 를 작성해서 쓰면 된다. 이 때 dt() 부분이 필요하다. 이유는 dt(DataTable) code 부분을 보면 알 수 있는데(아래 코드 확인) ,  module.exports 에 할당된 함수안에서 DataTable 을 jquery 에 추가하기 때문이다.

--> 어떤 경우에는 오히려 dt() 가 제대로 수행되지 않고, 바로 DataTable() 을 사용할 수도 있어서, 어느순간에 이 부분이 필요한지는 고민스럽다. 일단 쓰는 경우, 안쓰는 경우를 전부 테스트 해볼 필요가 있다.

import {foo} from './helpers';

import $ from 'jquery'
import dt from 'imports?define=>false!datatables.net';
dt();  // this is essential, without this, DataTable is not added to the 'jquery'


let elem = document.getElementById('output');
elem.innerHTML = `Output: ${foo()}`;
$(elem).DataTable()

DataTable code

(function( factory ) {
 "use strict";

 if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( ['jquery'], function ( $ ) {
   return factory( $, window, document );
  } );
 }
 else if ( true ) {
  // CommonJS
  module.exports = function (root, $) {
   if ( ! root ) {
    // CommonJS environments without a window global must pass a
    // root. This will give an error otherwise
    root = window;
   }

   if ( ! $ ) {
    $ = typeof window !== 'undefined' ? // jQuery's factory checks for a global window
     __webpack_require__(0) :
     __webpack_require__(0)( root );
   }

   return factory( $, root, root.document );
  };
 }
 else {
  // Browser
  factory( jQuery, window, document );
 }
}

References

1. NPM packages, www.datables.net
2. DataTables and Webpack - DataTables forums
3. jquery-datatables-webpack · GitHub