vue pracel试玩

安装

github https://github.com/parcel-bundler/parcel?utm_source=gold_browser_extension

首先通过 Yarn 或者 npm 安装 Parcel :

npm install -g parcel-bundler
1

在你正在使用的项目目录下创建一个 package.json 文件:

npm init -y
1

我用的原来项目的package.json 加入或修改原来的script

"dev2": "parcel index.html",
"build2": "parcel build index.html --public-url /"
1
2

安装依赖

npm i parcel-bundler parcel-plugin-vue babel-preset-env --dev
1

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

配置.babelrc

{
  "presets": [
    ["env"]
  ]
}

1
2
3
4
5
6

配置postcss.config.js

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: [
        'last 20 versions',
        'IE 9',
        'iOS >= 8',
      ],
    }),
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12

index.html引入 入口js

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="./src/main.js"></script>
</body>
1
2
3
4
5

运行

npm run dev2
1