webpack에서 jquery-migrate를 사용하는 방법은 무엇입니까?

Question

npm install jquery-migrate 이후에, require('jquery-migrate');은 scripts.js 파일에 있습니다. 이것은 잘 작동합니다 :

console.log(jQuery.migrateVersion); // JQMIGRATE: Migrate is installed with logging active, version 3.0.0 

이제 jquery-migrate가 프로덕션 버전에 없도록 설정하고 싶습니다.

webpack.config.js :

var dev = process.env.NODE_ENV !== 'prod'; 
var webpack = require('webpack'); 
var dist = '/dist/js'; 

module.exports = { 
    context: __dirname, 
    entry: __dirname + '/src/js/scripts.js', 
    output: { 
     path: __dirname + dist, 
     filename: 'scripts.js' 
    }, 
    resolve: { 
     alias: { 
      'jquery': 'jquery/src/jquery', 
      'jquery-migrate': 'jquery-migrate' 
     } 
    }, 
    plugins: dev ? [ 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery', 
      'jquery-migrate': 'jquery-migrate' 
     }) 
    ] : [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      'jQuery': 'jquery' 
     }) 
    ] 
}; 

이 작동하지 않습니다 :

console.log(jQuery.migrateVersion); // Undefined 

어떻게 jQuery를-마이그레이션이 webpack.config을 형성로드 할 수 있습니까?

Answer 1

우리가 직장에서 한 것은 require을 생산 확인에 넣는 것이 었습니다.

if (__DEV__) { 
    require('jquery-migrate'); 
} 

다음과 같은 경우에도 확인할 수 있습니다. if (process.env.NODE_ENV !== 'production').

그런 식으로 webpack은 생산을 위해 번들링 할 때 데드 코드를보고 require을 구문 분석하지 않으며 따라서 모듈을 포함합니다.

이러한 검사를 수행하려면 제공 플러그인을 사용하여 검사를 정의해야합니다.

new webpack.ProvidePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify(dev) // Or some other check 
    }, 
    __DEV__: JSON.stringify(true) // or something 
}) 

은 어느 쪽도 아니 ProvidePlugin 또는 alias은 BTW 당신은 ​​webpack.config.js를 통해 응용 프로그램 전반에 걸쳐 글로벌 __DEV__ 변수 접근을 만들 수 있습니다

Answer 2

파일을 index.html 파일로 인라인하는 경우. 어떤 종류의 환경 변수를 사용하여 html-webpack-plugin을 사용하여 스크립트를 표시할지 여부를 설정할 수 있습니다. 이 플러그인은 사용할 수있는 동적 템플릿을 지원합니다.

documentation은 잘 쓰여 있으므로 자세히 살펴 보시기 바랍니다.

Answer 3

:), jquery-migrate 필요하지 않습니다. 그냥 plugins 배열에 다음을 추가

plugins: [ 
    new webpack.DefinePlugin({ 
     __DEV__: dev 
    }), 
    // other plugins 
] 

Webpack - DefinePlugin

와 jquery-migrate 설치 : 응용 프로그램의 진입 점에서 그런

npm install jquery-migrate --save-dev 

를 (아마도 app.js) 단지 추가 :

if (__DEV__) { 
    require("jquery-migrate"); 
} 

plugins: [ 
    new webpack.ProvidePlugin({ 
     jQuery: 'jquery', 
     '$': 'jquery', 
     'window.jQuery': 'jquery', 
    }), 
    // other plugins 
] 

: 당신이 당신의 webpack.ProvidePlugin 생성자에 'window.jQuery': 'jquery' 줄을 추가해야 할 수 있도록또한, jqueryCaret의 (이 글을 쓰는 시점에서) 최신 버전과 같은 몇 가지 JQuery와 플러그인, 오히려 단지 jQuery보다 window.jQuery 참조