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
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
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
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
2
3
4
5
运行
npm run dev2
1