Browserify와 Webpack에 이어 또 다른 패키징 도구인 Parcel이 탄생했습니다. Parcel.js의 공식 웹사이트에는 "매우 빠른 제로 구성 웹 애플리케이션 패키징 도구"라고 소개되어 있습니다. 이 글은 주로 Parcel.js + Vue 2.x의 매우 빠른 제로 구성 패키징 경험에 대한 정보를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
간단히 살펴보니 효율성 측면에서는 webpack보다 훨씬 낫지만 함정이 많습니다. 향후 업그레이드를 통해 점차 대중화될 것입니다.
공식 문서: https://parceljs.org/getting_started. html
공식 GitHub: https://github.com/parcel-bundler/parcel
1. 기본 사용법
Parcel은 npm 또는 Yarn을 사용하여 설치할 수 있습니다. 이 블로그에서는 npm을 기반으로 설명합니다. npm
먼저 Parcel.js를 전역으로 설치해야 합니다 // 현재 버전은 1.3.0
npm install -g parcel-bundler
그런 다음 구성 파일을 작성합니다... 아니요, 이것은 웹팩이 아닙니다. 이것은 소포, 제로 구성 패키징입니다
프로젝트 디렉터리를 직접 생성하고 간단한 Traditional 페이지를 작성합니다.
그런 다음 프로젝트 루트 디렉터리에서 명령줄 도구를 열고 다음 명령을 입력합니다.
parcel index.html -p 3030
그런 다음 브라우저에서 http://localhost:3030/을 열어 페이지를 엽니다. 방금 개발했습니다
위 명령에서 -p를 사용하세요. 포트 번호를 설정하려면 포트 번호를 설정하지 않으면 기본적으로 포트 1234가 시작됩니다
parcel은 핫 업데이트를 지원하고 html, css, js의 변경 사항을 모니터링하고 real time
// 사실 src를 통해 소개된 CSS와 js는 핫 업데이트가 불가능합니다
개발이 완료된 후 다음 명령어를 입력하여 패키징합니다
parcel build index.html
패키징 후 dist 디렉터리가 생성됩니다
Qiaodou sack, 포장은 어떻습니까? 왜 아직도 파일이 이렇게 많아요?
걱정하지 마세요. 전통적인 방식으로 작성된 페이지입니다. package.json도 없습니다. 다음으로 모듈식 프로젝트로 변환하면 패키징 효과를 볼 수 있습니다
그럼요. 먼저 수동으로 열겠습니다. index.html 효과를 살펴보세요...잠깐...왜 CSS가 로드되지 않나요?
패키지 경로가 모두 절대 경로이기 때문입니다. 로컬에서 열어야 하는 경우에는 수동으로 상대 경로로 변경해야 합니다.
2. 모듈형 프로젝트에 적용
메인 영상부터 시작합니다. 먼저 위 프로젝트는 모듈형 프로젝트로 변환됩니다
npm init -y 명령을 통해 기본 package.json을 생성하고 시작 및 패키징 명령을 수정합니다
프로젝트가 npm run dev를 통해 직접 시작하고, npm run build가 패키징을 실행합니다
전세계적으로 설치된 소포였습니다. 실제로는 프로젝트에 종속성을 추가하는 것이 좋습니다
npm install parcel-bundler -S
위는 CSS를 사용한 전통적인 페이지입니다. link로 도입
모듈식 프로젝트로 변환할 예정이므로 main.js 하나만 도입하면 되고, 다른 CSS, js 파일도 main.js에 도입하면 됩니다
그러므로 다음과 같은 ES6 구문을 사용해야 합니다. 가져온 다음 babel을 설치하세요
npm install babel-preset-env -S
그런 다음 루트 디렉터리에 .babelrc 파일을 만들고 다음 구성을 추가하세요.
{
"presets": ["env"]
}autoprefixer
npm install postcss-modules autoprefixer -S
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}<!-- index.html -->
<body>
<p id="app"></p>
<script src="./src/main.js"></script>
</body>
// main.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './css/common.css'
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
router,
render: h => h(App)
}){
"name": "ParcelVue",
"version": "1.0.0",
"description": "The project of parcel & vue created by Wise Wrong",
"main": "main.js",
"scripts": {
"dev": "parcel index.html -p 3030",
"build": "parcel build index.html"
},
"keywords": [
"parcel",
"vue"
],
"author": "wisewrong",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.2.3",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"parcel-bundler": "^1.3.0",
"parcel-plugin-vue": "^1.4.0",
"postcss-modules": "^1.1.0",
"vue-loader": "^13.6.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.13"
},
"dependencies": {
"vue": "^2.5.13",
"vue-router": "^3.0.1"
}
}rrreee
루트 디렉터리에 .postcssrc 및 .babelrc 파일을 생성하는 것을 잊지 마세요
그런 다음 npm을 설치하여 종속성을 설치합니다. npm run dev는 프로젝트를 시작하고, npm run build는 프로젝트를 패키지합니다.
Vue에서 일괄적으로 파일을 다운로드하고 패키징하는 방법에 대한 자세한 예
웹팩 설치, 기본 패키징 사용법 및 명령 매개변수에 대한 자세한 설명
🎜위 내용은 Parcel.js 및 Vue 2.x 매우 빠른 제로 구성 패키징 경험 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
