Parcel.js + Vue 2.x에서 매우 빠른 제로 구성 패키징을 달성하는 방법-JS 튜토리얼-php.cn

Parcel.js + Vue 2.x에서 매우 빠른 제로 구성 패키징을 달성하는 방법

亚连

풀어 주다： 2018-06-15 17:30:29

원래의

1651명이 탐색했습니다.

이 글은 주로 Parcel.js + Vue 2.x의 매우 빠른 제로 구성 패키징 경험 관련 정보를 소개합니다. 필요한 친구들은 참고해도 됩니다.

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

Parcel .js의 공식 웹사이트에는 "매우 빠른 제로 구성 웹 애플리케이션 패키징 도구"라고 자체 소개가 있습니다.

잠시 살펴보니 효율성 측면에서는 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

로그인 후 복사

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

프로젝트 디렉터리를 직접 만들고 이를 사용하여 간단한 기존 페이지를 작성합니다

그런 다음 명령줄을 엽니다. 프로젝트 루트 디렉터리에 있는 도구에 다음 명령을 입력하세요

parcel index.html -p 3030

로그인 후 복사

그런 다음 브라우저에서 http를 엽니다. //localhost:3030/은 방금 개발한 페이지를 엽니다

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

parcel은 핫 업데이트를 지원하며 html, css, js 변경 사항 및 인스턴트 렌더링을 모니터링합니다

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

개발이 완료되면 package에 다음 명령어를 입력하세요

parcel build index.html

로그인 후 복사

패키징 후 dist 디렉터리가 생성됩니다

Qiaodou 자루, 동의합니다. 패킹은 어떻게 하나요? 왜 아직도 파일이 이렇게 많아요?

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

그럼요. 먼저 수동으로 열겠습니다. index.html 효과를 살펴보세요...잠깐...왜 CSS가 로드되지 않나요?

패키징된 경로는 모두 절대 경로이기 때문에 서버에 올려두어도 문제가 없습니다. 로컬에서 열어야 하는 경우 수동으로 상대 경로로 변경해야 합니다.

2. 모듈식으로 적용 projects

장편 영화 시작하려면 먼저 위 프로젝트를 모듈식 프로젝트로 변환하세요

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 &#39;babel-polyfill&#39;
import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import &#39;./css/common.css&#39;

Vue.config.productionTip = false

const vm = new Vue({
 el: &#39;#app&#39;,
 router,
 render: h => h(App)
})

로그인 후 복사

위는 전통적인 페이지입니다. 링크에서 소개한 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을 사용하도록 권장하지만, HTML 리소스를 컴파일하기 위해 직접 코드를 수정할 필요는 없습니다. 드디어 npm run build가 패키징된 것을 확인할 수 있으며, js와 css가 통합되었으며, 해당 내용도 babel로 컴파일되었습니다. 3. Parcel 사용 Vue 프로젝트에서

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

하지만 저는 주로 vue를 사용합니다. 오랫동안 연구한 끝에 마침내 방법을 찾았습니다

여전히 index.html을 입구로 사용하고 소개합니다. main.js with script:

rrreee

여기서 나는 Parcel과 Vue가 성공적으로 결합할 수 있게 해주는 매우 강력한 플러그인 Parcel-plugin-vue를 추천하고 싶습니다.

전에 언급한 babel 외에도 autoprefixer, final package.json은 다음과 같습니다. rrreee

루트 디렉터리에 .postcssrc 및 .babelrc 파일을 만드는 것을 잊지 마세요

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

The 위는 제가 모든 사람을 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.