웹팩이 포함된 타사 라이브러리를 도입하는 방법 및 주의사항(코드 예시)
이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7450
15
1374
52
77
11
40
19
14
8
VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드
Jun 15, 2023 pm 06:17 PM
Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치
PHP와 Vue: 프런트엔드 개발 도구의 완벽한 조합
Mar 16, 2024 pm 12:09 PM
PHP와 Vue: 프론트엔드 개발 도구의 완벽한 조합 오늘날 인터넷이 빠르게 발전하는 시대에 프론트엔드 개발은 점점 더 중요해지고 있습니다. 사용자가 웹 사이트 및 애플리케이션 경험에 대한 요구 사항이 점점 더 높아짐에 따라 프런트 엔드 개발자는 보다 효율적이고 유연한 도구를 사용하여 반응형 및 대화형 인터페이스를 만들어야 합니다. 프론트엔드 개발 분야의 두 가지 중요한 기술인 PHP와 Vue.js는 함께 사용하면 완벽한 도구라고 볼 수 있습니다. 이 기사에서는 독자가 이 두 가지를 더 잘 이해하고 적용할 수 있도록 PHP와 Vue의 조합과 자세한 코드 예제를 살펴보겠습니다.
프론트엔드 면접관이 자주 묻는 질문
Mar 19, 2024 pm 02:24 PM
프론트엔드 개발 인터뷰에서 일반적인 질문은 HTML/CSS 기초, JavaScript 기초, 프레임워크 및 라이브러리, 프로젝트 경험, 알고리즘 및 데이터 구조, 성능 최적화, 크로스 도메인 요청, 프론트엔드 엔지니어링, 디자인 패턴, 새로운 기술 및 트렌드. 면접관 질문은 후보자의 기술적 능력, 프로젝트 경험, 업계 동향에 대한 이해를 평가하기 위해 고안되었습니다. 따라서 지원자는 자신의 능력과 전문성을 입증할 수 있도록 해당 분야에 대한 충분한 준비를 갖추어야 합니다.
Django는 프론트엔드인가요, 백엔드인가요? 확인 해봐!
Jan 19, 2024 am 08:37 AM
Django는 빠른 개발과 깔끔한 방법을 강조하는 Python으로 작성된 웹 애플리케이션 프레임워크입니다. Django는 웹 프레임워크이지만 Django가 프런트엔드인지 백엔드인지에 대한 질문에 답하려면 프런트엔드와 백엔드의 개념에 대한 깊은 이해가 필요합니다. 프론트엔드는 사용자가 직접 상호작용하는 인터페이스를 의미하고, 백엔드는 HTTP 프로토콜을 통해 데이터와 상호작용하는 서버측 프로그램을 의미합니다. 프론트엔드와 백엔드가 분리되면 프론트엔드와 백엔드 프로그램을 독립적으로 개발하여 각각 비즈니스 로직과 인터랙티브 효과, 데이터 교환을 구현할 수 있습니다.
C# 개발 경험 공유: 프런트엔드 및 백엔드 공동 개발 기술
Nov 23, 2023 am 10:13 AM
C# 개발자로서 우리의 개발 작업에는 일반적으로 프런트엔드와 백엔드 개발이 포함됩니다. 기술이 발전하고 프로젝트의 복잡성이 증가함에 따라 프런트엔드와 백엔드의 공동 개발이 점점 더 중요해지고 복잡해졌습니다. 이 문서에서는 C# 개발자가 개발 작업을 보다 효율적으로 완료하는 데 도움이 되는 몇 가지 프런트 엔드 및 백엔드 공동 개발 기술을 공유합니다. 인터페이스 사양을 결정한 후 프런트엔드와 백엔드의 공동 개발은 API 인터페이스의 상호 작용과 분리될 수 없습니다. 프론트엔드와 백엔드 협업 개발이 원활하게 진행되기 위해서는 가장 중요한 것은 좋은 인터페이스 사양을 정의하는 것입니다. 인터페이스 사양에는 인터페이스 이름이 포함됩니다.
Go 언어 프런트엔드 기술 탐색: 프런트엔드 개발을 위한 새로운 비전
Mar 28, 2024 pm 01:06 PM
빠르고 효율적인 프로그래밍 언어인 Go 언어는 백엔드 개발 분야에서 널리 사용됩니다. 그러나 Go 언어를 프런트엔드 개발과 연관시키는 사람은 거의 없습니다. 실제로 프런트엔드 개발에 Go 언어를 사용하면 효율성이 향상될 뿐만 아니라 개발자에게 새로운 지평을 열어줄 수도 있습니다. 이 기사에서는 프런트엔드 개발에 Go 언어를 사용할 수 있는 가능성을 살펴보고 독자가 이 영역을 더 잘 이해할 수 있도록 구체적인 코드 예제를 제공합니다. 전통적인 프런트엔드 개발에서는 사용자 인터페이스를 구축하기 위해 JavaScript, HTML, CSS를 사용하는 경우가 많습니다.
프런트 엔드에서 인스턴트 메시징을 구현하는 방법
Oct 09, 2023 pm 02:47 PM
인스턴트 메시징을 구현하는 방법에는 WebSocket, Long Polling, Server-Sent Events, WebRTC 등이 있습니다. 자세한 소개: 1. 실시간 양방향 통신을 달성하기 위해 클라이언트와 서버 사이에 지속적인 연결을 설정할 수 있는 WebSocket 프런트 엔드는 WebSocket API를 사용하여 WebSocket 연결을 생성하고 송수신을 통해 인스턴트 메시징을 달성할 수 있습니다. 2. 실시간 통신 등을 시뮬레이션하는 기술인 Long Polling
Golang과 프런트엔드 기술의 결합: Golang이 프런트엔드 분야에서 어떤 역할을 하는지 살펴보세요.
Mar 19, 2024 pm 06:15 PM
Golang과 프런트엔드 기술의 결합: Golang이 프런트엔드 분야에서 어떤 역할을 하는지 살펴보려면 구체적인 코드 예제가 필요합니다. 인터넷과 모바일 애플리케이션의 급속한 발전으로 인해 프런트엔드 기술이 점점 더 중요해지고 있습니다. 이 분야에서는 강력한 백엔드 프로그래밍 언어인 Golang도 중요한 역할을 할 수 있습니다. 이 기사에서는 Golang이 프런트엔드 기술과 어떻게 결합되는지 살펴보고 특정 코드 예제를 통해 프런트엔드 분야에서의 잠재력을 보여줍니다. 프론트엔드 분야에서 Golang의 역할은 효율적이고 간결하며 배우기 쉬운 것입니다.
