parcel建立vue开发环境

时间 2019-11-29

标签 parcel 建立 vue 开发环境繁體版

原文原文链接

parcel-vue

parcel最近超火爆的0配置web打包工具,记录一下parcel中vue的配置javascript

首先须要咱们初始化一个项目

mkdir parcel-vue
  cd parcel-vue
  npm init -y
复制代码

建立文件目录

src
- assets //静态文件
- components //.vue模块
- scss //css样式
- App.vue
- main.js
index.html //parcel入口文件(parcel入口文件既能够是.html,也能够是.js)
package.json

添加parcel依赖

npm install -g parcel-bundler
复制代码

npm install vue vue-router --save
复制代码

npm install autoprefixer babel-polyfill babel-preset-env parcel-bundler parcel-plugin-vue postcss-modules vue-hot-reload-api vue-loader vue-style-loader vue-template-compiler --save-dev
复制代码

也能够用yarn和淘宝的cnpmcss

修改package.json配置

"scripts": {
    "dev": "parcel index.html -p 8080",  //-p改端口
    "build": "parcel build index.html"
  },
复制代码

如下配置出自parcelhtml

Babel（babel-preset-env）

Babel 是一个流行的 JavaScript 转译器，拥有大量的插件生态系统。在 Parcel 中使用 Babel 的方式与其单独使用或与其余打包器配合使用的方式相同。而后，建立一个 .babelrc 文件：vue

{
    "presets": ["env"]
  }
复制代码

PostCSS（postcss-modules autoprefixer）

PostCSS 是一个用插件转换 CSS 的工具，好比 autoprefixer, cssnext, 和 CSS Modules。您能够使用如下名称之一建立配置文件，从而使 Parcel 使用 PostCSS 配置： .postcssrc (JSON), .postcssrc.js, 或者 postcss.config.js. 而后，建立一个 .postcssrc 文件：java

{
    "modules": true,
    "plugins": {
        "autoprefixer": {
        "grid": true
        }
    }
   }
复制代码

插件指定在 plugins 对象的 key 中，并选项定义使用对象值。若是插件没有选项，只需将其设置为 true 便可。 Autoprefixer ， cssnext 和其余工具的目标浏览器能够在 .browserslistrc 文件中指定：git

> 1%
  last 2 versions
复制代码

CSS Modules 的启用方式稍有不一样，在顶级 modules key 上使用。这是由于 Parcel 须要对 CSS Modules 有特殊的支持，由于它们也会导出一个对象，包含到 JavaScript 包中。请注意，你仍然须要在你的项目中安装 postcss-modules 。github

PostHTML

PostHTML 是一个用插件转换 HTML 的工具。您能够使用如下名称之一建立配置文件，从而使 Parcel 使用 PostHTML 配置：.posthtmlrc (JSON), posthtmlrc.js, 或者 posthtml.config.js.web

在你的应用程序中安装插件： yarn add posthtml-img-autosize 而后，建立一个 .posthtmlrc 文件：vue-router

{
  "plugins": {
    "posthtml-img-autosize": {
      "root": "./images"
    }
  }
}
复制代码

插件指定在 plugins 对象的 key 中，并选项定义使用对象值。若是插件没有选项，只需将其设置为 true 便可。npm

github