웹팩이 포함된 타사 라이브러리를 도입하는 방법 및 주의사항(코드 예시)-JS 튜토리얼-php.cn

웹팩이 포함된 타사 라이브러리를 도입하는 방법 및 주의사항(코드 예시)

不言

풀어 주다： 2019-01-15 11:20:16

앞으로

2702명이 탐색했습니다.

이 글은 webpack에 타사 라이브러리를 도입하는 방법과 주의사항(코드 예제)에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

일반적인 상황에서는 npm 관리 저장소에서 찾을 수 없는 타사 라이브러리 사용에 대해 걱정할 필요가 없습니다.

jquery와 같은 특정 라이브러리가 필요한 경우 npm install jquery 스크립트 명령을 직접 실행하여 이 프로젝트에 필요한 종속성을 설치할 수 있습니다.

그런 다음 jquery를 사용하는 모듈 파일에서 'jquery'에서 $를 가져오거나 var $ = require('jquery')를 소개합니다.

이는 webpack으로 구축된 프로젝트에 타사 라이브러리를 도입하는 데 일반적으로 사용되는 방법입니다.

참고: 샘플 코드를 더 잘 보여주기 위해 예제는 nodemon 기사를 기반으로 합니다.

그러나 다양한 시나리오에서는 webpack으로 구축된 프로젝트에 대한 요구 사항이 다릅니다.

프로젝트 크기가 충분히 작습니다(cdn)

webapck의 처리 방법인 경우 webapck를 참조할 수 있습니다. 이 문서에서는 가장 작은 빌드 출력을 달성합니다.

CDN 등 webapck가 아닌 처리 방법을 사용하세요.

html-webpack-plugin을 사용하여 특정 CDN(예: boot CDN)의 타사 라이브러리(예: jquery)를 템플릿 파일 template/index.html에 직접 도입하는 경우 작업도 매우 간단합니다. html의 참조 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>third party</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

로그인 후 복사

그런 다음 module.js中使用jquery를 클릭하면 됩니다. 참조 코드는 다음과 같습니다.

require('./module.css');
module.exports = function() {
    $(document.body).append('<h1>hello webpack</h1>')    
}

로그인 후 복사

마지막으로 npm run test를 실행하면 빌드가 완료되면 hello webpack이라는 단어가 표시됩니다. 레드 페이지 효과가 있는 브라우저.

글로벌 환경에서 타사 라이브러리(provide-plugin 또는 imports-loader) 사용

타사 라이브러리를 매번 사용하지 않으려면 import 또는 require()를 사용하여 참조해야 합니다. 전역 변수로 정의할 수 있습니다.

webpack의 ProvidePlugin에 내장된 플러그인을 사용하면 이 문제를 해결할 수 있습니다. 자세한 내용은 ProvidePlugin 소개를 참고하시기 바랍니다.

cdn에서 참조하는 jquery와의 충돌을 피하기 위해 여기에서는 lodash를 사용합니다.

먼저 lodash 종속성을 설치합니다. 명령은 다음과 같습니다.

yarn add lodash --dev

로그인 후 복사

그런 다음 webpack.config.js에 다음 코드를 추가합니다.

new webpack.ProvidePlugin({
        _: 'lodash'
}),

로그인 후 복사

두 번째로 module.js에 다음 코드를 추가합니다.

...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
$(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
...

로그인 후 복사

마지막으로 , npm run test script 명령을 실행하면 구성이 완료된 후 브라우저 페이지에 1,2,3,4,5,6,~을 추가할 수 있습니다.

lodash의 특정 도구 기능을 전역적으로 사용할 수 있도록 지정하려면 다음과 같이 _.concat,

먼저 webapck.config.js를 다음과 같이 수정하고 코드는 다음과 같습니다.

...
new webpack.ProvidePlugin({
        // _: 'lodash',
        _concat: ['lodash', 'concat']
}),
...

로그인 후 복사

그런 다음, module.js를 수정하세요. 코드는 다음과 같습니다:

...
var arr = [1, 2, 3, 4, 5 ,6];
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
...

로그인 후 복사

플러그인을 사용하고 싶지 않다면, 동일한 목적을 달성할 수 있는 import-loader 사용을 고려해 볼 수도 있습니다.

불필요한 간섭을 피하기 위해 밑줄을 사용하여 시연할 수 있습니다.

먼저 imports-loader 종속성을 설치합니다. 명령은 다음과 같습니다.

yarn add imports-loader --dev

로그인 후 복사

그런 다음 밑줄 종속성을 설치합니다. 명령은 다음과 같습니다.

yarn add underscore

로그인 후 복사

두 번째로 webapck.config.js에 다음 코드를 추가합니다.

...
module: {
        rules: [
                {
                        test: require.resolve('underscore'),
                        use: 'imports-loader?_=underscore'
                },
                ...
        ]
},
...

로그인 후 복사

참고: underscore와 lodash는 모두 싱글톤 모델을 사용하여 개발되었으며, 인스턴스화된 생성자의 이름은 모두_입니다. 구별하려면 둘 중 하나를 변경해야 합니다. imports-loader가 이 로고의 별칭을 지정하는 것은 약간 어렵지만, Provide-plugin은 이 문제가 없으며 개인화된 별칭을 설정할 수 있습니다.

webpack.config.js를 수정하면 코드는 다음과 같습니다.

new webpack.ProvidePlugin({
        // _: 'lodash',
        // _concat: ['lodash', 'concat'],
        __: 'lodash'
}),

로그인 후 복사

__로 정의된 lodash와 밑줄 _로 구분할 수 있습니다.

그런 다음 module.js를 수정하면 코드는 다음과 같습니다.

...
// provide-plugin
// $(document.body).append('<h1>' + _.concat(arr, '~') + '</h1');
// $(document.body).append('<h1>' + _concat(arr, '~') + '</h1');
$(document.body).append('<h1>' + __.concat(arr, '~') + '</h1');
...

로그인 후 복사

마지막으로 모든 파일을 저장하면 브라우저에서 비슷한 결과를 볼 수 있습니다(저장 후 nodemon이 자동으로 브라우저를 시작합니다).

cdn and externals

이전에 externals에 대해 몇 가지 문제를 겪었습니다. 이에 대해 자세히 설명해야 하는 이유는 많은 사람들이 이것이 무엇을 위해 사용되는지 이해하지 못하기 때문입니다.

장면 재현:

이전에 jquery를 사용한 프로젝트가 있었습니다. 이 라이브러리는 비교적 고전적이기 때문에 애플리케이션의 다양한 모듈에서 자주 참조됩니다. 사용방법은

import $ from 'jquery'

로그인 후 복사

또는

var $ = require('jquery')

로그인 후 복사

입니다. 결과적으로 빌드가 완료된 후 파일의 크기가 상대적으로 커집니다. 그런 다음 위에서 설명한 대로 CDN 사용을 고려해보세요. 이런 식으로 가져오기 또는 필수 참조를 삭제하고 설치된 jquery 종속성을 삭제해야 합니다. 그러나 프로젝트 구조가 지저분하고 모듈이 많기 때문에 수정이 부족하거나 수정이 누락되는 문제를 방지하려면 응용 프로그램 오류가 발생합니다. 무엇을 해야 할까요?

jquery 종속성을 삭제하지 않으면 cdn을 사용하는 목적이 의미가 없다고 말하는 사람들도 있습니다. 외부를 사용하면 이 문제를 해결할 수 있습니다.

module.js 파일에 다음 코드를 추가할 수 있습니다.

...
var $ = require('jquery')
...

로그인 후 복사

그런 다음 파일을 저장하고 빌드 출력에 다음 오류가 표시되는지 확인합니다.

ERROR in ./module.js
Module not found: Error: Can't resolve 'jquery' in 'E:\workspace\me\webpack-play\demo\example-1'
 @ ./module.js 3:0-23
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js

로그인 후 복사

모듈 module.js의 jquery를 구문 분석할 수 없습니다.

다음으로 webpack.config.js에 다음 코드를 추가합니다.

externals: { 
    jquery: 'jQuery',
    jquery: '$'
},

로그인 후 복사

여기서 jquery는 require('jquery')의 jquery를 나타내고 jQuery와 $는 jquery 라이브러리 자체 식별자에서 제공하는 인스턴스화를 나타냅니다. 다른 라이브러리의 CDN화, jquery와 유사한 수정.

그러나 프로젝트 초기에 cdn을 사용하기로 결정한 경우 jquery를 사용하는 모듈에서는 var $ = require('jquery') 또는 import $ from 'jquery'를 사용하지 마세요. , 어떤 이유로 나중에 jquery 종속성이 도입될 수 있는 경우 var $ = require('jquery')를 사용하거나 import $ from 'jquery';를 사용해야 합니다.

참조 소스 코드

위 내용은 웹팩이 포함된 타사 라이브러리를 도입하는 방법 및 주의사항(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!