Giter Site home page Giter Site logo

parcel-seed's Introduction

使用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"]
  }

parcel-seed's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.