前端老生

使用parcel初始化前端项目

使用parcel创建前端项目

 

全局安装 parcel

 yarn add --dev parcel

创建项目、初始化npm

mkdir parcel-project && npm init -y

创建src目录和 index.html、index.js文件

mkdir src && cd $_ && touch index.html index.js

添加Package scripts, and source

{

"...": "...",

"source": "src/index.html",

"scripts": {

"start": "parcel",

"lint": "eslint",

"build": "parcel build"

}

}

启动服务

npm start

 

其他

添加 gitignore

touch .gitignore

添加目标浏览器 package.json

{

  "...": "...",

  "browserslist": "> 0.5%, last 2 versions, not dead",

}

配置Prettier自动格式化代码

增加代理 proxy, 项目根目录添加.proxyrc文件

touch .proxyrc

{

  "/api": {

    "target": "http://localhost:8000/",

    "pathRewrite": {      "^/api": ""    }  

  }

}

增加scss、eslint

yarn add -D sass yarn add -D eslint npm init @eslint/config

eslint package.json

{  "...": "...",  "lint": "eslint" }

compression

Parcel supports compressing bundles using Gzip and Brotli.

yarn add @parcel/compressor-gzip @parcel/compressor-brotli --dev

"compressors": {    "*.{html,css,js,svg,map}": ["@parcel/compressor-gzip"]  }