집 >웹 프론트엔드 >JS 튜토리얼 >Parcel.js+Vue 2.x 빠른 구성 패키징 방법

Parcel.js+Vue 2.x 빠른 구성 패키징 방법

php中世界最好的语言원래의: 2018-04-13 16:01:181351검색

이번에는 Parcel.js+Vue 2.x의 빠른 구성 및 패키징 방법을 알려드리겠습니다. Parcel.js+Vue 2.x의 빠른 구성 및 패키징을 위한 Notes는 무엇인가요? 살펴보자.

Browserify와 Webpack에 이어 또 다른 패키징 도구인 Parcel이 탄생했습니다

Parcel.js의 공식 웹사이트에는 “매우 빠른 제로 구성 웹 애플리케이션 패키징 도구”

라는 자기 소개가 있습니다. 잠깐 살펴보니 효율성 측면에서는 확실히 webpack보다 훨씬 낫지만, 향후 업그레이드를 통해 점차 대중화될 것으로 보입니다

공식 문서: https://parceljs.org/getting_started.html

공식 GitHub: https://github.com/parcel-bundler/parcel

1. 기본 사용법

Parcel은 npm이나 Yarn을 사용하여 설치할 수 있습니다. 개인적으로 이 블로그에서는 npm을 사용하여 설명하겠습니다

먼저 Parcel.js를 전역적으로 설치해야 합니다. // 현재 버전 1.3.0

npm install -g parcel-bundler

그런 다음 구성 파일 을 작성하세요... 아니요, 이것은 웹팩이 아닙니다. 이것은 소포, 제로 구성 패키징입니다

직접 프로젝트 디렉토리를 생성하고 간단한 전통 페이지 작성

그런 다음 프로젝트 루트 디렉터리에서 명령줄 도구를 열고 다음 명령

parcel index.html -p 3030

을 입력하세요. 그런 다음 브라우저에서 http://localhost:3030/을 열어 방금 개발한 페이지를 엽니다

위 명령에서 -p는 포트 번호를 설정하는 데 사용됩니다. 설정하지 않으면 기본적으로 포트 1234가 시작됩니다

Parcel은 핫 업데이트를 지원하며 html, css 및 js의 변경 사항을 모니터링하고 즉시 렌더링합니다

//실제로 src를 통해 가져온 CSS와 js는 핫 업데이트가 불가능합니다

개발이 완료되면 다음 명령어를 입력하여

parcel build index.html

를 패키징합니다. dist 디렉토리는 패키징 후에 생성됩니다

Qiaodou 자루, 약속된 포장은 어떻습니까? 왜 아직도 파일이 이렇게 많아요?

걱정하지 마세요. 전통적인 방식으로 작성된 페이지입니다. package.json도 없습니다. 다음으로 모듈식 프로젝트로 변환되면 패키징 효과를 볼 수 있습니다

좋습니다. 먼저 index.html을 수동으로 열어서 효과를 확인하겠습니다...잠깐...왜 CSS가 로드되지 않습니까?

패키지 경로가 모두 절대 경로이기 때문에 서버에 넣어도 문제가 없습니다. 로컬에서 열어야 한다면 수동으로 상대 경로로 변경해야 합니다

2. 모듈식 프로젝트에 적용

메인 영화부터 시작해서 먼저 위 프로젝트를 모듈형 프로젝트로 변환해 보세요

npm init -y 명령을 통해 기본 package.json을 생성하고 시작 및 패키징 명령을 수정합니다npm init -y 命令创建一个默认的 package.json，并修改启动和打包命令

这样就可以直接通过 npm run dev 启动项目，npm run build 执行打包了

之前是全局安装的 parcel，实战中更推荐在项目中添加依赖

npm install parcel-bundler -S

上面是一个传统页面，使用 link 引入的 css

既然要改造为模块化项目，那就只需要引入一个 main.js，然后在 main.js 中引入其他的 css 和 js 文件

所以需要用到 import 等 ES6 语法，那就安装一个 babel 吧

npm install babel-preset-env -S

然后在根目录创建一个 .babelrc 文件，添加以下配置：

{
 "presets": ["env"]
}

再安装一个 css 转换工具，比如 autoprefixer

npm install postcss-modules autoprefixer -S

创建 .postcssrc 文件：

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

官方文档还推荐了一款编译 html 资源的插件 PostHTML，不过这里暂时不需要

自行改造代码，最后 npm run build

이런 식으로 npm run dev, npm run build 는 패키징을 실행합니다

이전에는 패키지가 전역적으로 설치되었지만 실제로는 프로젝트에 종속성을 추가하는 것이 좋습니다

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

위는 link에서 소개한 CSS를 사용한 전통적인 페이지입니다. 모듈식 프로젝트로 변환하고 싶기 때문에 main.js만 도입하고 main.js에 다른 CSS 및 js 파일을 도입하면 됩니다 따라서 import와 같은 ES6 구문을 사용한 다음 babel

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

을 설치해야 합니다. 그런 다음 루트 디렉터리에 .babelrc 파일을 만들고 다음 구성을 추가합니다. 🎜rrreee🎜 autoprefixer🎜rrreee🎜와 같은 다른 CSS 변환 도구를 설치하세요. .postcssrc 파일 만들기: 🎜rrreee🎜 공식 문서에서는 HTML 리소스 컴파일을 위한 플러그인인 PostHTML도 권장하지만 여기서는 당분간 필요하지 않습니다🎜🎜 코드를 직접 수정하고 마지막으로 npm run build package🎜🎜 js와 css가 통합되어 있고 그 내용이 babel과 autoprefixer🎜🎜로 컴파일된 것을 볼 수 있습니다. 🎜🎜3. Vue 프로젝트에서 Parcel 사용하기🎜🎜🎜🎜 공식 문서는 반응 프로젝트에 적합한 레시피를 제공합니다🎜

但我常用的是 vue，研究了好久，终于找到了方法

依旧使用 index.html 作为入口，以 script 引入 main.js：

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

这里要推荐一个很厉害的插件 parcel-plugin-vue，它让 parcel 和 vue 成功牵手

再加上之前提到的 babel、autoprefixer，最后的 package.json 是这样的：

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

一定记得在根目录创建 .postcssrc 和 .babelrc 文件

然后 npm install 安装依赖， npm run dev 启动项目，npm run build 打包项目

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Parcel.js+Vue 2.x 빠른 구성 패키징 방법

관련 기사