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

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

上篇文章我们讲了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 
      1. @base: #f938ab;
      3. .box-shadow(@style, @c) when (iscolor(@c)) {
      4.   -webkit-box-shadow: @style @c;
      5.   box-shadow:         @style @c;
      6. }
      7. .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
      8.   .box-shadow(@style, rgba(0, 0, 0, @alpha));
      9. }
      10. .box {
      11.   color: saturate(@base, 5%);
      12.   border-color: lighten(@base, 30%);
      13.   div { .box-shadow(0 0 5px, 30%) }
      14. }
    2. 使用lessc styles.less > styles.css
    3. styles.css 
      1. .box {
      2.   color: #fe33ac;
      3.   border-color: #fdcdea;
      4. }
      5. .box div {
      6.   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      7.   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      8. }
使用TypeScript

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

  • 安装

    使用命令npm install -g typescript全局安装就可以了，接着可以在有typescript的文件夹内使用tsc greeter.ts将styles.less编译成greeter.js

    安装成功，运行tsc -v就可以看到版本号了

  • 例子

    1. greeter.ts

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

    2. 使用tsc greeter.ts

    3. greeter.js

      1. function greeter(person) {
      2.     return "Hello, " + person;
      3. }
      4. var user = "Jane User";
      5. 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文件的目录。

    • 两种方式(文件包括，文件夹包括与不包括)

      1. 使用"files"属性 
        1.     "compilerOptions": {
        2.         "module": "commonjs",
        3.         "noImplicitAny": true,
        4.         "removeComments": true,
        5.         "preserveConstEnums": true,
        6.         "sourceMap": true
        7.     },
        8.     "files": [
        9.         "core.ts",
        10.         "sys.ts",
        11.         "types.ts",
        12.         "scanner.ts",
        13.         "parser.ts",
        14.         "utilities.ts",
        15.         "binder.ts",
        16.         "checker.ts",
        17.         "emitter.ts",
        18.         "program.ts",
        19.         "commandLineParser.ts",
        20.         "tsc.ts",
        21.         "diagnosticInformationMap.generated.ts"
        22.     ]
        23. }
      2. 使用"include"和"exclude"属性 
        1.     "compilerOptions": {
        2.         "module": "system",
        3.         "noImplicitAny": true,
        4.         "removeComments": true,
        5.         "preserveConstEnums": true,
        6.         "outFile": "../../built/local/tsc.js",
        7.         "sourceMap": true
        8.     },
        9.     "include": [
        10.         "src/**/*"
        11.     ],
        12.     "exclude": [
        13.         "node_modules",
        14.         "**/*.spec.ts"
        15.     ]
        16. }

    • 含义（配置项的含义）

      截了张图，太长了，大家可以去GitHub下载，或者访问上面的链接。总之，意思就是你在项目里面配置好tsconfig.json,就能编译整个项目了。

      在项目的根目录使用命令tsc -init，就可以在项目创建一个默认的tsconfig.json文件了。

使用WebPack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

那我们这边讲的是4.0的版本

  • 安装

    使用命令npm install --global webpack全局安装，在4.0的版本还需要webpack-cli，使用命令npm install --global webpack-cli。

    安装成功，使用命令webpack -v

    1.   ![enter description here](https://i.loli.net/2018/12/30/5c27b581eb123.jpg)

  • 例子

    1. 创建例子目录

      1. 创建目录

      例子目录

      1. index.html

        1. <!doctype html>
        2. <html>
        3.  <head>
        4.    <title>起步</title>
        5.  </head>
        6.  <body>
        7.  <script src="main.js"></script>
        8.  </body>
        9. </html>

      2. index.js

        1. document.write("HelleWord")

    2. 打包

      • 我们使用命令webpack进行打包。会输出下面的字样。有黄色警告，但是我们“dist”文件夹出现了“main.js”


      enter description here
      • 尝试阅读黄色信息，他告诉我们，webpack打包时是可以配置环境的，然后去官网了解了，4.0的打包分为“开发环境”，“生产环境”，第一个打包不会进行文件的压缩，而“生产环境”。“开发环境”命令：webpack --mode=development，“生产环境命令”：webpack --mode=production。

      enter description here

      enter description here

    3. 预览html，成功执行


      enter description here

  • webpack.config.js

webpack 的配置文件，是导出一个对象的 JavaScript 文件。我们看到别人的很多项目，在项目的根目录都有这个文件。

文件里面配置了各种选项，各种节点，并且是一个JavaScript的对象，可以直接代码拿起来用。打包时的配置已这个文件优先。

看名称我们已经知道文件的含义，就是来配置webpack怎么打包，打包的规则是什么。这个配置文件非常庞大，在这里就不过多的解释了，在以后的文章文针对每个点来写个例子。这边就已一个中文注释的代码结束这话题，大家看到中文就知道每个节点啥含义，有啥用了。那更多就到官网看咯：https://webpack.css88.com

  1.         const path = require('path');  //引入node的path模块
  3.         const webpack = require('webpack'); //引入的webpack,使用lodash
  5.         const HtmlWebpackPlugin = require('html-webpack-plugin')  //将html打包
  7.         const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
  9.         const CopyWebpackPlugin = require('copy-webpack-plugin')
  11.         // console.log(path.resolve(__dirname,'dist')); //物理地址拼接
  13.         module.exports = {
  15.             entry: './src/index.js', //入口文件  在vue-cli main.js
  17.             output: {       //webpack如何输出
  19.                 path: path.resolve(__dirname, 'dist'), //定位，输出文件的目标路径
  21.                 filename: '[name].js'
  23.             },
  25.             module: {       //模块的相关配置
  27.                 rules: [     //根据文件的后缀提供一个loader,解析规则
  29.                     {
  31.                         test: /\.js$/,  //es6 => es5 
  33.                         include: [
  35.                             path.resolve(__dirname, 'src')
  37.                         ],
  39.                         // exclude:[], 不匹配选项（优先级高于test和include）
  41.                         use: 'babel-loader'
  43.                     },
  45.                     {
  47.                         test: /\.less$/,
  49.                         use: ExtractTextPlugin.extract({
  51.                             fallback: 'style-loader',
  53.                             use: [
  55.                             'css-loader',
  57.                             'less-loader'
  59.                             ]
  61.                         })
  63.                     },
  65.                     {       //图片loader
  67.                         test: /\.(png|jpg|gif)$/,
  69.                         use: [
  71.                             {
  73.                                 loader: 'file-loader' //根据文件地址加载文件
  75.                             }
  77.                         ]
  79.                     }
  81.                 ]                  
  83.             },
  85.             resolve: { //解析模块的可选项  
  87.                 // modules: [ ]//模块的查找目录 配置其他的css等文件
  89.                 extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
  91.                 alias: { //模快别名列表
  93.                     utils: path.resolve(__dirname,'src/utils')
  95.                 }
  97.             },
  99.             plugins: [  //插进的引用, 压缩，分离美化
  101.                 new ExtractTextPlugin('[name].css'),  //[name] 默认  也可以自定义name  声明使用
  103.                 new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
  105.                     file: 'index.html', //打造单页面运用 最后运行的不是这个
  107.                     template: 'src/index.html'  //vue-cli放在跟目录下
  109.                 }),
  111.                 new CopyWebpackPlugin([  //src下其他的文件直接复制到dist目录下
  113.                     { from:'src/assets/favicon.ico',to: 'favicon.ico' }
  115.                 ]),
  117.                 new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是很多组件会复用的，省去了import
  119.                     '_': 'lodash'  //引用webpack
  121.                 })
  123.             ],
  125.             devServer: {  //服务于webpack-dev-server  内部封装了一个express 
  127.                 port: '8080',
  129.                 before(app) {
  131.                     app.get('/api/test.json', (req, res) => {
  133.                         res.json({
  135.                             code: 200,
  137.                             message: 'Hello World'
  139.                         })
  141.                     })
  143.                 }
  145.             }
  147.         }

WebPack还有很多需要理解的，比如“模块热替换”,"懒加载"等等，后面有机会再讲。

开始写项目

那接下来我们就是VsCode+Node+Less+TypeScript构建一个简单的应用“知乎日报每天版”

  • 介绍

  1. 知乎日报API

    那先介绍下api，api从网上百度查下就知道了，在这边链接一篇文章，大大已经分析好了，我们就拿过来用就可以了。文章链接：知乎日报API

    我使用了两个api，一个是获取最新消息，也就是今天的消息，另一个当然是详情啦，根据这两个api，我采用了“Vue”框架（这样就不用自己搭了-_-）来实现，当然技术还是文章标题那些，来构建一个“知乎日报每天版”

  2. 每天日报页面

  3. 日报详情页面

  • 实现

  1. 创建项目

    1. 首先上面的Less,TypeScript，WebPack都要先安装好。

    2. 接着我们安装vue，官方提供了一个“vue cli”，可以根绝这个来快速创建一个Vue的项目，那我们采用的是3.0的版本，3.0才有“TS”的项目，那使用命令npm install -g @vue/cli，照旧vue -V就可以看到版本号了，若是2.0的，可以先卸载2.0，再重新安装3.0.

    3. 使用命令vue create projectname来创建项目

      1. 第一个选项是默认，第二个是配置化，我们选择第二个

      2. 然后按照我们想要的，选择安装，按“空格键”选中

      3. 后面就按“Enter”一直确认了，到了选择样式是，我们选择“Less”，后面就一路默认了。


      enter description here

      1. 创建好的项目

      2. 运行项目

        使用命令npm run serve,运行项目，http://localhost:8080 就可以看到效果了。

  2. 改造项目

    1. App.Vue

      那由于我们不需要Home，About的切换了，就注释掉，直接使用" "来显示我们写好的View

    2. 添加界面和路由

      • 我们添加如下的两个View

        可以看到我们css采用的less语法来写的，script采用的ts语法来写的。


      enter description here

      enter description here
      • 接下来设置路由

    3. 然后就可以按照上面的来运行项目，进入http://localhost:8080/#/zhihu 就可以看到效果了

    4. 使用命令npm run build，他会直接帮你打包好。然后你在服务器上就可以运行了，无需依赖NodeJs了。


    enter description here

  3. 发现问题

    我们发现上面讲的webpack.config.js，在该项目并没有，那时因为Vue Cli3.0集成了在模块里面，并采用默认的配置来构建项目，编译项目，打包项目，这样我们无需搭理了。若是我们有特殊要求了，Vue将配置全部集中来根目录vue.config.js中，我们可在根目录创建该文件，进行配置、具体我们下篇再讲。

那我也做个Express版的，源码都在GitHub，可以上去下载来看看。

总结一下

那这篇文章，对于Less，TS，WebPack并没有去深入讲解，每个点都可以写一篇或者更多，既然系列是零基础，那就是了解个概念，知道是啥，有啥效果就可以了，或许等到真正接触大型项目时，可以深入去了解。那最后也用了一个Vue的项目来演示Less与Ts，并采用Vue自带WebPack来打包前端。无需再配置啥，真正做到你生成项目就可以在开始做，只要你有前端的基础知识。

Less与TypeScript的简单理解与应用，并使用WebPack打包静态页面的更多相关文章

  1. git的简单理解及基础操作命令

    前端小白一枚,最近开始使用git,于是花了2天看了廖雪峰的git教程(偏实践,对于学习git的基础操作很有帮助哦),也在看<git版本控制管理>这本书(偏理论,内容完善,很不错),针对所学 ...

  2. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  3. [转]简单理解Socket

    简单理解Socket 转自 http://www.cnblogs.com/dolphinX/p/3460545.html  题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公 ...

  4. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

  5. Deep learning：四十六(DropConnect简单理解)

    和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...

  6. Deep learning：四十二(Denoise Autoencoder简单理解)

    前言: 当采用无监督的方法分层预训练深度网络的权值时,为了学习到较鲁棒的特征,可以在网络的可视层(即数据的输入层)引入随机噪声,这种方法称为Denoise Autoencoder(简称dAE),由Be ...

  7. 简单理解dropout

    dropout是CNN(卷积神经网络)中的一个trick,能防止过拟合. 关于dropout的详细内容,还是看论文原文好了: Hinton, G. E., et al. (2012). "I ...

  8. 我们为之奋斗过的C#-----C#的一个简单理解

    我们首先来简单叙述一下什么是.NET,以及C#的一个简单理解和他们俩的一个区别. 1 .NET概述 .NET是Microsoft.NET的简称,是基于Windows平台的一种技术.它包含了能在.NET ...

  9. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

随机推荐

  1. wGenerator如何编写模板

    编写模板大致分为4个步骤: 确定开发语言与数据库类型 分析表数据类型与语言的类型对应 分析代码中哪些可以规整为模板 编写与测试模板 我们对照流程图看的话会更加清晰: 1.如何分析表数据与开发语言的类型 ...

  2. 为什么我的会话状态在ASP.NET Core中不工作了？

    原文:Why isn't my session state working in ASP.NET Core? Session state, GDPR, and non-essential cookie ...

  3. Python的垃圾回收机制（引用计数+标记清除+分代回收）

    一.写在前面: 我们都知道Python一种面向对象的脚本语言,对象是Python中非常重要的一个概念.在Python中数字是对象,字符串是对象,任何事物都是对象,而它们的核心就是一个结构体--PyOb ...

  4. 目标检测 anchor 理解笔记

    anchor在计算机视觉中有锚点或锚框,目标检测中常出现的anchor box是锚框,表示固定的参考框. 目标检测的任务: 在哪里有东西 难点: 目标的类别不确定.数量不确定.位置不确定.尺度不确定 ...

  5. Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法:在写LINQ语句的时候,往往会看到AsEnumerable() ,AsQueryable() 和T ...

  6. JAVA基础知识（一）—JAVA概述

    JAVA概述 1991 年Sun公司的James Gosling(詹姆斯·高斯林)等人开始开发名称为 Oak 的语言,希望用于控制嵌入在有线电视交换盒.PDA等的微处理器: 1994年将Oak语言更名 ...

  7. 入门rocketmq从浅到深

    目录 一.引言 二.介绍 三.Rocketmq关键概念 1.主题与标签 2.发送与订阅群组 3.Broker与NameServer 4.广播消费与集群消费 5.消息队列 6.集群方式 7.顺序消息 8 ...

  8. openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  9. 安卓开发笔记（十一）：SharedPrefences储存

    一.利用SharedPrefences将数据储存于data.txt当中 package com.example.lenovo.studyittwo; import android.content.Br ...

  10. falkonry

    falkonry.com/ 2019 Top 100 AI companies in the world