5%" ], "engines": { "browsers": "> 5%" }, "postcss": { "modules": false } } # 4. 使用 ## 4.1. 新建一个项目 新建一个 `index.html` 作为入口 新建一个 `src` 文件夹，里面新建一个 `index.js` 作为 `js` 入口 import './index.css' const sum = (a, b) => { console.log(a + b) } sum(1, 2) console.log('hello parcel') 新建一个 `index.css` 作为 `css` 入口 body { background-color: #ccc; } 运行 `parcel index.html`，打开 `http://localhost:1234` 即可看到效果 ## 4.2. 新建一个页面 新建一个 `about.html`

about

运行 `parcel about.html`，打开 `http://localhost:1234` 即可看到效果 ## 4.3. 新建一个组件 在 `src` 文件夹下新建一个 `components` 文件夹，里面新建一个 `header.js` export default { template: `` } 在 `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` 即可看到效果