Less与TypeScript的简单理解与应用，并使用WebPack打包静态页面

Less与TypeScript的简单理解与应用，并使用WebPack打包静态页面

既然选择了远方，便只顾风雨兼程 __ HANS许

系列：零基础搭建前后端分离项目

 

• • • • • 系列：零基础搭建前后端分离项目
        • 创建空项目
        • 使用Less
        • 使用TypeScript
        • 使用WebPack
        • 开始写项目
        • 总结一下

 

上篇文章我们讲了VsCode的使用以及Node与Npm的使用，并简单的创建了一个Express的简单前端框架项目。那这篇文章我们进阶的使用Less与TypeScript写一个静态的H5页面，并使用WebPack打包成静态页面。

该篇文章讲述的是Less，TypeScript，WebPack的基本使用，并没与涉及到大型项目，讲讲安装，讲讲用法，讲讲配置，毕竟你要知道是一句英语的翻译是什么，才懂得翻译过来得中文是什么意思吧。那最后面我们使用一个VsCode+Less+TypeScripts+WebPack+Vue做的两个页面，一个简单的"知乎日报"小应用作为结束，也作为下篇文章的开篇。下面用到的代码都在GitHub上面。

---

创建空项目

• 使用npm创建空项目
  在终端界面使用npm init创建，成功后会根目录创建一个package.json的文件。
  或者npm init -y这样创建，就直接默认配置生成package.json文件了。

使用Less

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

• 安装
  使用命令npm install -g less全局安装就可以了，接着可以在有less的文件夹内使用lessc styles.less将styles.less编译成styles.css
  安装成功，运行lessc -v就可以看到版本号了
  

• 例子

  1. styles.less

     @base: #f938ab;
     
     .box-shadow(@style, @c) when (iscolor(@c)) {
       -webkit-box-shadow: @style @c;
       box-shadow:         @style @c;
     }
     .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
       .box-shadow(@style, rgba(0, 0, 0, @alpha));
     }
     .box {
       color: saturate(@base, 5%);
       border-color: lighten(@base, 30%);
       div { .box-shadow(0 0 5px, 30%) }
     }
     

  2. 使用lessc styles.less > styles.css
  3. styles.css

     .box {
       color: #fe33ac;
       border-color: #fdcdea;
     }
     .box div {
       -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     }
     

使用TypeScript

TypeScript是JavaScript的超集并且能够编译输出为纯粹的JavaScript.

• 安装
  使用命令npm install -g typescript全局安装就可以了，接着可以在有typescript的文件夹内使用tsc greeter.ts将styles.less编译成greeter.js
  安装成功，运行tsc -v就可以看到版本号了
  

• 例子

  1. greeter.ts

     function greeter(person: string) {
         return "Hello, " + person;
     }
     
     let user = "Jane User";
     
     document.body.innerHTML = greeter(user);
     

  2. 使用tsc greeter.ts

  3. greeter.js

     function greeter(person) {
         return "Hello, " + person;
     }
     var user = "Jane User";
     document.body.innerHTML = greeter(user);
     
     

• tsconfig.json
  上面是直接编译一个文件嘛，那要是要编译整个项目呢，那要怎么办，我们使用了“TS”，那这个项目也就是"TS项目"，TS有个规则：如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。,
  也就是说，tsconfig.json文件就是TS项目编译.ts的配置文件。

  • 规则

    1. 不带任何输入文件的情况下调用tsc，编译器会从当前目录开始去查找tsconfig.json文件，逐级向上搜索父目录。

    2. 不带任何输入文件的情况下调用tsc，且使用命令行参数--project（或-p）指定一个包含tsconfig.json文件的目录。