webpack과 함께 jQuery를 구성하고 사용하는 방법

webpack을 사용하여 jQuery 실행을 테스트하는 매우 간단한 프로젝트가 있습니다. 그러나 번들 단계에서 오류가 발생했습니다. 여기에 오류가 있습니다 : 여기 webpack과 함께 jQuery를 구성하고 사용하는 방법

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'jsdom' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 5:13-29 

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'xmlhttprequest' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 8:28-53 

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'location' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 13:24-43 

ERROR in ./~/jQuery/lib/node-jquery.js 
Module not found: Error: Cannot resolve module 'navigator' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/jQuery/lib 
@ ./~/jQuery/lib/node-jquery.js 17:25-45

내 설정 파일은

있습니다
package.json

{ 
    "name": "frontend", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.jsx", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.17.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.16.0", 
    "babel-preset-react": "^6.16.0", 
    "jquery": "^2.2.2", 
    "react": "file:node_modules/react", 
    "react-dom": "file:node_modules/react-dom", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.16.2" 
    } 
}

webpack.config.js는

var webpack = require('webpack') 
var path = require('path') 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js', 
    publicPath: 'public', 
    }, 
    module: { 
    loaders: [ 
     { 

     test: /\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel' 
     }, 
     { 
     test: /\.css/, 
     include: APP_DIR, 
     } 
    ] 
    }, 

}; 

module.exports = config;

index.jsx :

import React from 'react' 
import {render} from 'react-dom' 
import $ from 'jQuery' 


(function() { 

    $(document).ready(function() { 
     console.log("It works!"); 
    }); 

})();

언급 된 모듈 (jsdom, xmlhttprequest, ..)을 설치하면 오류가 매우 긴 오류로 바뀝니다.

출처

2016-10-14 modeller

같은 : http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack – candidJ

webpack.ProvidePlugin을 사용하여 jQuery를 전역 식별자로 확인할 수 있습니다. ProvidePlugin을 사용할 때 jQuery을 전역 변수로 사용할 수 있으므로 모듈로 가져 오지 않겠습니다.

일이 도움이 될

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
]

출처

2016-10-14 06:12:09 Thaadikkaaran

webpack과 함께 jQuery를 구성하고 사용하는 방법

답변

관련 문제