如何从0开始搭建1个前端项目?第五章(支持其它语言篇 - Less&Sass&TypeScript&React)

如何从0开始搭建1个前端项目?第五章(支持其它语言篇 - Less&Sass&TypeScript&React)

第五章:支持其它语言篇(Less&Sass&&TypeScript&React

favicon.svg 所有的源码都在这里(如果对你有帮助,求star支持,感谢!🙏)

上一篇:第四章:代码打包篇(webpack

10. 支持其它语言

1. 支持 LessSass

这两个都是 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的类型语法直接去掉而不做类型校验,所以速度更快)

3. 支持React,待更新...

favicon.svg 所有的源码都在这里(如果对你有帮助,求star支持,感谢!🙏)

下一篇:(待更新...)

分类:
前端