about
运行 `parcel about.html`，打开 `http://localhost:1234` 即可看到效果 ## 4.3. 新建一个组件 在 `src` 文件夹下新建一个 `components` 文件夹，里面新建一个 `header.js` export default { template: `header
`
}
在 `index.js` 中引入
import Header from './components/header'
new Header({
target: document.getElementById('app')
})
## 4.4. 新建一个包
在 `src` 文件夹下新建一个 `utils` 文件夹，里面新建一个 `math.js`
export const sum = (a, b) => {
return a + b
}
export const minus = (a, b) => {
return a - b
}
在 `index.js` 中引入
import { sum, minus } from './utils/math'
console.log(sum(1, 2))
console.log(minus(1, 2))
## 4.5. 使用别名
在 `package.json` 中配置 `alias`
{
"alias": {
"@": "./src"
}
}
在 `index.js` 中引入
import Header from '@/components/header'
import { sum, minus } from '@/utils/math'
## 4.6. 引入静态资源
在 `src` 文件夹下新建一个 `assets` 文件夹，里面放一张图片 `logo.png`
在 `index.js` 中引入
import logo from '@/assets/logo.png'
const img = new Image()
img.src = logo
document.body.appendChild(img)
## 4.7. 打包
运行 `parcel build index.html` 即可打包，打包后的文件在 `dist` 文件夹下
`parcel` 会自动压缩代码，并且会自动将图片转为 `base64` 格式
# 5. 进阶
## 5.1. 使用 sass/less/stylus
安装 `sass`
npm install --save-dev sass
或
yarn add --dev sass
在 `src` 文件夹下新建一个 `index.scss`
body {
background-color: #ccc;
.header {
color: red;
}
}
在 `index.js` 中引入
import './index.scss'
运行 `parcel index.html` 即可看到效果
## 5.2. 使用 postcss
安装 `postcss`
npm install --save-dev postcss
或
yarn add --dev postcss
在 `src` 文件夹下新建一个 `postcss.config.js`
module.exports = {
plugins: [
require('autoprefixer')
]
}
在 `package.json` 中配置 `browserslist`
{
"browserslist": [
"last 2 versions",
"> 5%"
]
}
在 `index.css` 中写入
body {
display: flex;
}
运行 `parcel index.html` 即可看到效果
## 5.3. 使用 autoprefixer
安装 `autoprefixer`
npm install --save-dev autoprefixer
或
yarn add --dev autoprefixer
在 `postcss.config.js` 中配置
module.exports = {
plugins: [
require('autoprefixer')
]
}
在 `package.json` 中配置 `browserslist`
{
"browserslist": [
"last 2 versions",
"> 5%"
]
}
在 `index.css` 中写入
body {
display: flex;
}
运行 `parcel index.html` 即可看到效果
## 5.4. 使用 babel
安装 `babel`
npm install --save-dev @babel/core @babel/preset-env
或
yarn add --dev @babel/core @babel/preset-env
在 `src` 文件夹下新建一个 `.babelrc`
{
"presets": ["@babel/preset-env"]
}
在 `index.js` 中写入
const sum = (a, b) => {
return a + b
}
console.log(sum(1, 2))
运行 `parcel index.html` 即可看到效果