第五章:支持其它语言篇(Less
&Sass&
&TypeScript
&React
)
所有的源码都在这里(如果对你有帮助,求star支持,感谢!🙏)
上一篇:第四章:代码打包篇(webpack
)
10. 支持其它语言
1. 支持 Less 和 Sass
这两个都是 CSS 的预处理语言,它们用起来差不多,都给css添加了嵌套规则、变量、mixin、选择器继承、函数等功能,使 CSS 更易维护和扩展。具体的区别感兴趣的可以自行去了解下
- 安装
npm i less sass -D
复制代码
- 调整以下目录结构、文件和内容
Demo
...
|- /src
|- index.js
|- index.css
+ |- less.less
+ |- sass.scss
复制代码
src/index.less
body {
color: red;
div {
color: pink;
}
}
复制代码
src/index.scss
body {
color: red;
div {
color: pink;
}
}
复制代码
注意:sass在这里使用的后缀名是
.scss
不是.sass
,它们的区别是语法格式不一样(使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性)
- 运行以下命令
npx lessc src/less.less stylesheets/less.css
npx sass src:stylesheets --watch
复制代码
因为浏览器只支持原生的css,所以要把less和sass编译成css。运行完命令你就可以在stylesheets目录下看到编译后的css文件了,它已经帮我们处理好了上面写的嵌套语法。如果你在一个html文件中引入它们,那么最终的div标签会被渲染成粉色
- 修改.stylelintrc.json
npm i postcss-less postcss-scss -D
复制代码
{
"extends": [
"stylelint-config-standard"
],
+ "overrides": [
+ {
+ "files": [
+ "*.less",
+ "**/*.less"
+ ],
+ "customSyntax": "postcss-less"
+ },
+ {
+ "files": [
+ "*.scss",
+ "**/*.scss"
+ ],
+ "customSyntax": "postcss-scss"
+ }
+ ],
"ignoreFiles": [
"node_modules/",
"dist/"
],
"ignoreFiles": [
"node_modules/",
"dist/"
],
"rules": {}
}
复制代码
postcss-less和postcss-scss是用来通过stylelint校验less和sass的
- 修改.vscode/setting.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
],
"stylelint.validate": [
"css",
+ "less",
+ "scss"
],
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
+ "[less]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[scss]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
复制代码
- 修改package.json
...,
"scripts": {
...,
- "stylelint": "stylelint src/**/*.css",
+ "stylelint": "stylelint src/**/*.{css,less,scss}",
- "postcss": "postcss src/**/*.css --base src --dir build",
+ "postcss": "postcss src/**/*.{css,less,scss} --base src --dir build",
},
"lint-staged": {
"*.js": "eslint --fix",
- "*.css": "stylelint --fix",
+ "*.{css,less,scss}": "stylelint --fix",
"*.": "prettier --write"
},
复制代码
对less和sass文件开启stylelint校验和prettier格式化以及lint-staged(注意:postcss也可以编译less和sass,但是它不做语法处理,也就是不会把它们编译成css)
- 修改webpack.config.js
npm i less-loader sass-loader -D
复制代码
...
module.exports = (env, argv) => {
return {
module: {
// 规则
rules: [
{
test: /\.css$/,
use: cssLoaders,
},
+ {
+ test: /\.less$/,
+ use: [...cssLoaders, 'less-loader'],
+ },
+ {
+ test: /\.scss$/,
+ use: [...cssLoaders, 'sass-loader'],
+ },
...,
],
},
};
};
复制代码
- 修改src/index.js
- import './index.css';
+ import './sass.scss';
复制代码
less-loader和sass-loader是用来通过webpack处理less和sass的,和之前的css-loader相似。运行npm start,你可以看到页面上的文字已经变成粉色了
2. 支持 TypeScript
TypeScript 是一种用于应用程序级 JavaScript 的语言。TypeScript 为 JavaScript 添加了可选类型,这些类型支持适用于任何浏览器、任何主机、任何操作系统上的大型 JavaScript 应用程序的工具。TypeScript 编译为可读的、基于标准的 JavaScript
- 安装
npm i typescript -D
复制代码
- 调整以下目录结构、文件和内容
Demo
...
|- /src
|- index.js
|- index.css
|- index.less
|- index.scss
+ |- ts.ts
复制代码
src/index.ts
const a: number = 2;
console.log(a);
复制代码
这里我们写上一些ts的语法
- 运行以下命令
npx tsc src/ts.ts
复制代码
因为浏览器只支持原生的js,所以需要把ts编译成js
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
]
}
复制代码
因为ts编译的配置项比较多,所以这里创建一个配置文件(也可以通过 npx tsc --init),tsc会读取这个配置文件来编译ts。这里的配置项比较简单,比如include的配置代表编译src目录下的所有ts文件,其它配置项可以去上面的链接去了解下。现在就可以直接执行npx tsc来编译了(注意:如果你的项目中不使用ts,那么也应该需要有一个jsconfig.json的配置文件)
- 修改.eslintrc.json
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
复制代码
{
...,
// 解析器
- "parser": "espree",
+ "parser": "@typescript-eslint/parser",
// 继承
"extends": [
"eslint:recommended"
+ "plugin:@typescript-eslint/recommended",
"prettier"
],
// 插件
"plugins": [
+ "@typescript-eslint"
],
// 规则
"rules": {
/*
"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告(不会影响退出码)
"error" or 2 - 将规则视为一个错误 (退出码为1)
*/
"no-console": 1
}
}
复制代码
@typescript-eslint/parser是用来通过eslint校验ts的, @typescript-eslint/eslint-plugin试一下ts语法规则的插件,这里开启推荐的的行
- 修改.vscode/setting.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
+ "typescript",
],
"stylelint.validate": [
"css",
"less",
"scss"
],
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
+ "[typescript]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
}
复制代码
- 修改package.json
...,
"scripts": {
...,
+ "type-check": "tsc --noemit",
- "eslint": "eslint src/**/*.js",
+ "eslint": "eslint src/**/*.{js,ts}",
},
"lint-staged": {
- "*.js": "eslint --fix",
+ ".{js,ts}": "eslint --fix",
"*.{css,less,scss}": "stylelint --fix",
"*.": "prettier --write"
},
复制代码
对ts文件开启eslint校验和prettier格式化以及lint-staged,type-check用来检验ts文件是否有语法错误
- 修改babel.config.json
npm i @babel/preset-typescript -D
复制代码
{
// 预设
"presets": [
...,
+ "@babel/preset-typescript"
],
}
复制代码
@babel/preset-typescript是用来通过babel编译ts的,可以运行npm run babel编译ts
- 修改webpack.config.js
npm i babel-loader -D
复制代码
...
module.exports = (env, argv) => {
return {
...,
// 解析
resolve: {
- extensions: ['.js', '.ts'],
+ extensions: ['.js', '.ts'],
},
module: {
// 规则
rules: [
{
test: /\.css$/,
use: cssLoaders,
},
+ {
+ test: /\.less$/,
+ use: [...cssLoaders, 'less-loader'],
+ },
+ {
+ test: /\.scss$/,
+ use: [...cssLoaders, 'sass-loader'],
+ },
{
- test: /\.js$/,
+ test: /\.(js|ts)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
// options: {},
},
},
...,
],
},
};
};
复制代码
- 修改src/index.js
+ import './ts.ts';
复制代码
babel-loader是用来通过webpack把ts文件交给babel来处理,运行npm staet,你可以看到页面上已经打印出了ts文件的变量了(这里是通过babel而不是tsc来处理ts,因为后者只是粗暴的把ts的类型语法直接去掉而不做类型校验,所以速度更快)