第五章：支持其它语言篇（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的类型语法直接去掉而不做类型校验，所以速度更快）