Parcel.js 및 Vue 2.x 매우 빠른 제로 구성 패키징 경험 사례-JS 튜토리얼-php.cn

Parcel.js 및 Vue 2.x 매우 빠른 제로 구성 패키징 경험 사례

小云云

풀어 주다： 2017-12-25 14:51:26

원래의

1823명이 탐색했습니다.

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

로그인 후 복사

와 같은 다른 CSS 변환 도구를 설치하세요

{
 "modules": true,
 "plugins": {
 "autoprefixer": {
  "grid": true
 }
 }
}

로그인 후 복사

.postcssrc 파일을 만듭니다.

<!-- 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)
})

로그인 후 복사

The 공식 문서에서는 HTML 리소스 컴파일을 위해 PostHTML 플러그인을 권장하지만 여기서는 당분간 필요하지 않습니다

코드를 직접 변환하고 마지막으로 npm run build Packaging

js와 css가 통합된 것을 볼 수 있습니다, 그 내용은 babel과 autoprefixer에 의해 편집되었습니다

3. Vue 프로젝트에서 Parcel 사용하기

공식 문서에는 반응 프로젝트에 적합한 레시피가 나와 있습니다

하지만 제가 자주 사용하는 것이 바로 vue입니다. 드디어 방법을 찾았습니다

여전히 index.html을 입구로 사용하고 main.js를 스크립트와 함께 소개합니다:

{
 "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"
 }
}

로그인 후 복사

여기서 Parcel과 Vue를 성공적으로 허용하는 매우 강력한 플러그인 Parcel-plugin-vue를 추천하고 싶습니다. 합류

앞서 언급한 babel과 autoprefixer가 결합된 최종 package.json은 다음과 같습니다.

rrreee
루트 디렉터리에 .postcssrc 및 .babelrc 파일을 생성하는 것을 잊지 마세요

그런 다음 npm을 설치하여 종속성을 설치합니다. npm run dev는 프로젝트를 시작하고, npm run build는 프로젝트를 패키지합니다.