Parcel.js + Vue 2.x 极速零配置打包体验教程(2)

日期：2020-05-11 栏目：程序人生浏览：次

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

{
 "presets": ["env"]
}

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

npm install postcss-modules autoprefixer -S

创建 .postcssrc 文件：

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

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

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

可以看到 js 和 css 已经整合，其内容也经过了 babel 和 autoprefixer 的编译

三、在 Vue 项目中使用 Parcel

官方文档给出了适用于 react 项目的配方

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

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

<!-- index.html -->
<body>
 <div id="app"></div>
 <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 打包项目

总结

以上所述是小编给大家介绍的Parcel.js + Vue 2.x 极速零配置打包体验教程，希望对大家有所帮助，如果大家有所帮助。

Parcel.js + Vue 2.x 极速零配置打包体验教程(2)

相关推荐