vite+svelte项目构建篇

描述

学习博文[ https://juejin.cn/post/7121759118070644772#heading-21 ]

1、项目构建步骤：

# 1、新建文件夹 study-vite-svelte
# 2、下载模板的命令
npm init vite@latest

# 3、输入项目名
vite-svelte-y

# 4、选择 Svelte 模板
双选 -> svelte

# 5、进入项目并安装依赖
cd vite-svelte-y
npm install

# 6、运行项目
npm run dev

# 7、在浏览器访问 http://127.0.0.1:5173/

# 8、访问后页面不显示，控制台报错
# Uncaught ReferenceError: globalThis is not defined at overlay.ts:120
# 在index.html中添加<script> this.globalThis || (this.globalThis = this) </script>处理

2、项目构建成功目录展示

vite-svelte-y
|-- .vscode
	|---- extensions.json
|-- node_modules
|-- public
	|---- vite.svg
|-- src
	|---- assets
		|------- svelte.svg
	|---- lib
		|------- Counter.svelte
	|---- app.css
	|---- app.svelte
	|---- main.js
	|---- vite-env.d.ts
--.gitignore
-- index.html
-- jsconfig.json
-- package-lock.json
-- package.json
-- README.md
-- vite.config.js

3、Package.json

{
  "name": "vite-svelte-y",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.1",
    "svelte": "^3.49.0",
    "vite": "^3.0.7"
  }
}

4、vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()]
})

5、Other

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

6、路由

npm i svelte-router-spa

package.json

"start": "sirv public -s"

7、问题记录

1、Error: terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

 Solve：npm install terser

2、Dynamic require of "path" is not supported

 Solve：引用const { resolve } = require('path') 报错，改为import { resolve } from 'path'

3、JSX element class does not support attributes because it does not have a '$$prop_def' property.
在项目中新建tsConfig.json文件夹，内容如下
{
    "compilerOptions": {
        "outDir":"./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module":"commonjs",
        "target":"es6",
        "jsx":"react"
    }
}