实战用Parcel打包vue

古城微笑少年丶 2022-05-19 03:10 169阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

`parcel`一个快速，零配置的 Web 应用程序打包工具,这里我介绍下如何和`vue`结合进行开发,强烈建议`node8`以上,具体代码:[https://github.com/zlxbuzz/pa...][https_github.com_zlxbuzz_pa...]

初始化项目

mkdir parcel-demo && cd parcel-demo && yarn init -y

安装依赖

yarn add parcel-bundler parcel-plugin-vue babel-preset-env less  --dev
    yarn add vue-router

其中`parcel-bundler`是主要的工具，对于`vue`结尾的单文件，需要单独处理文件类型，  
`parcel-plugin-vue`这个插件会通过`vueify`来生成对应的代码，`parcel`会自动加载`parcel-plugin`开头的依赖。

在根目录添加babel，postcss配置

//postcss.config.js
    module.exports = {
      plugins: [
        require('autoprefixer')({ browsers:  [
                                  'last 20 versions',
                                  'IE 9',
                                  'iOS >= 8']})]
    }

//.babelrc
    
    {
      "presets": [
        ["env"]
      ]
    }

新建html

这里引用了`mint`来方便展示页面

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
      <title>parcel-vue-demo</title>
      
      <link rel="stylesheet" href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css">
    
      <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
      
      <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
    </head>
    <body>
      <app></app>
      <script src="./src/index.js"></script>
    </body>
    </html>

开发

和基于webpack开发的目录结构一致,具体代码可以参考 [https://github.com/zlxbuzz/pa...][https_github.com_zlxbuzz_pa...]

src
    ├── app.vue
    ├── index.js
    ├── index.less
    ├── router.js
    └── views
        ├── detail.vue
        └── index.vue

//index.js
    
    
    import app from './app.vue'
    import router from './router'
    
    import './index.less'
    
    window.onload = function(){
      new Vue({
        router,
        el: 'app',
        components: {
          app
        }
      });
    }

添加脚本

{
      "name": "h5",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "scripts": {
        "dev": "parcel index.html",
        "build": "parcel build index.html --public-url /"
      },
      "devDependencies": {
        "babel-preset-env": "^1.6.1",
        "less": "^2.7.3",
        "parcel-bundler": "^1.2.0",
        "parcel-plugin-vue": "^1.0.1"
      },
      "dependencies": {
        "vue-router": "^3.0.1"
      }
    }

只需要执行`npm run dev` 和 `npm run build` 就可以进行开发和构建，`public-url`就相当于资源的引用路径。

原文链接：[https://segmentfault.com/a/1190000012427886][https_segmentfault.com_a_1190000012427886]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

[Fundebug]: https://www.fundebug.com/
[https_github.com_zlxbuzz_pa...]: https://github.com/zlxbuzz/parcel-demo
[https_segmentfault.com_a_1190000012427886]: https://segmentfault.com/a/1190000012427886
[1386816-20180502112633892-1858746955.png]: /images/20220519/ae4992d1d4dd44289a3f8446bdc5c7b7.png