使用 Parcel-Bundler 配置极简 Vue 脚手架

/ 0评 / 0

通常我们在项目中使用 Webpack 来搭建前端脚手架,它强大的自定义配置和生态圈让开发效率得到了很大的提升。但有时我们只想开发一个小型页面,并不涉及到 Vue 组件化开发, Webpack 就显得有些臃肿。

这里我们试着使用 Parcel 来处理动态打包和热更新,使用 ES6 书写代码,并且通过 babel 来转换出 ES5 的代码。

首先安装 Parcel (我还是比较习惯用 NPM, 但现在大家都推荐 Yarn):

npm i -g parcel-bundler

然后初始化一个项目:

mkdir parcel-vue-demo && cd parcel-vue-demo
npm init -y

安装 vue 依赖:

npm i -S vue

得到这样的 package.json:

{
  "name": "parcel-vue-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.16"
  }
}

然后我们新建一个 index.html 文件,作为 Parcel 的入口文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Parcel Vue Demo</title>
</head>
<body>
    <div id="app"></div>
    <script src="app.js"></script>
</body>
</html>

注意引用的 app.js 主文件需要在 div#app 之后,然后新建一个 app.js:

import Vue from 'vue/dist/vue'

const app = new Vue({
    el: '#app',
    template: '<h1>{{ name }}</h1>',
    data () {
        return {
            name: 'Hello'
        }
    }
})

这时如果我们运行:

parcel index.html

就已经能看到它正常运行了,而且效率非常高。但为了让大部分浏览器能够支持打包的 js,我们需要将我们通常书写的 ES6 转为 ES5。这里使用 Babel:

npm i -D babel-preset-env

编辑 .babelrc

{
    "presets": [
        "env"
    ]
}

再次运行 parcel 后,我们便能得到转换为 ES5 的代码。至此,一个极简化轻量级的 vue 开发环境就搭好了,如果配合 VScode 的各种插件,开发会更加事半功倍。

发表评论

电子邮件地址不会被公开。 必填项已用*标注