人生苦短,我用 Vite 2.0

Vite 是一个基于原生 ES 模块并集成大量预配置功能的前端打包工具。它不只适用于 Vue.js,而是一个通用工具。
Vite 的优点是快,相当快,并且预先内建了很多常用功能,一般项目基本不用关心配置,开包即用,节约大量生命。

一、使用预设模版(下面都以 npm 为例):

1、安装:

$ npm init @vitejs/app

2、使用模板:

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线:
npm init @vitejs/app my-vue-app -- --template vue

3、然后选取各种预设模板:

  • vanilla
  • vanilla-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts

二、手动安装 Vite(适用于手写前端项目):

1、安装:

$ npm i -D vite

2、根目录新建 package.json 文件:

{
    "scripts": {
        
        // 由于 vite 通过 -D 安装,vite 命令不能全局使用,如果不添加该脚本,则只能通过 npx vite 开启开发服务器
        // npm run dev 开启 dev 服务器
        "dev": "vite",
        // npm vite build 编译文件,默认为 /dist 目录
        "build": "vite build"
    }
}

3、安装 CSS 预处理器(以 Less 为例):

// vite 中已经配置好了各种预处理器,只用安装相应处理器就完事
$ npm i -D less

4、Typescript 由 vite 集成的 esbuild 编译,速度相当快,直接用

5、示例文件:
index.html 为根目录入口文件:

<html>
    <title>Title</title>
    <style lang="less">
        body {
            background-color: red;
            p {
                font-size: 20px;
            }
        }
    </style>
    <body>
        <p>Hello world</p>
        <div id="pic"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

main.ts:

// 在 ts / js 文件中引入 静态资源 、样式文件
import imgSrc from '/src/image/pic.png';
import '/src/styles/otherStyles.less';

document.getElementById('pic').innerHTML = `<img src="{$imgSrc}" alt="picture"/>`;

其它更多配置可以参考官方文档:https://cn.vitejs.dev/guide/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容