写ssr网页,或者说纯模板,现在不可能不用一些先进的技术和框架,比如Scss,PostCss,TailwindCss,模块化JS,ES6,所以一个构建工具是在所难免的,在webpack和parcel以及snowpack里选择了snowpack,简单可定制,有项目模板和够用的插件.
1. Installation
1
2
3
|
mkdir start-project && cd start-project
npm init -y
npm install -D snowpack
|
修改package.json
1
2
3
4
|
"scripts": {
"start": "snowpack dev",
"build": "snowpack build"
}
|
2. Integration
2.1. Sass Integration
安装插件
1
|
npm i -D @snowpack/plugin-sass
|
配置文件
1
2
3
4
5
6
7
8
9
10
11
12
|
// snowpack.config.js
module.exports = {
plugins: [
[
'@snowpack/plugin-sass',
{
/* see options below */
},
],
],
};
|
目录结构
1
2
3
4
5
6
7
8
|
src
├── js
│ ├── hello.js
│ └── index.js
└── sass
├── base
│ └── _variables.scss
└── main.scss
|
main.scss
1
2
3
4
5
|
@import "./base/variables";
body {
background-color: $background-color;
}
|
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="/dist/js/index.js"></script>
<link rel="stylesheet" href="/dist/sass/main.css" />
</head>
<body>
<div>
<h1>Daocidi Html</h1>
</div>
</body>
</html>
|
2.2. Tailwind Integration
Install Dependences
1
|
npm install --save-dev tailwindcss @snowpack/plugin-postcss postcss postcss-cli
|
Confiure
1
2
3
4
5
6
7
8
|
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
// other plugins can go here, such as autoprefixer
},
};
|
1
2
3
4
5
6
7
|
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
// specify other options here
};
|
1
2
3
4
5
6
7
8
9
10
11
|
// snowpack.config.js
module.exports = {
mount: {
src: '/_dist',
public: '/',
},
plugins: [
'@snowpack/plugin-postcss',
],
};
|
3. References
