Less與TypeScript的簡單理解與應用，並使用WebPack打包靜態頁面

来源:https://www.cnblogs.com/xuhuale/archive/2019/01/06/10229627.html
-Advertisement-
Play Games

既然選擇了遠方，便只顧風雨兼程 __ HANS許 系列：零基礎搭建前後端分離項目 系列：零基礎搭建前後端分離項目 創建空項目 使用Less 使用TypeScript 使用WebPack 開始寫項目 總結一下 上篇文章我們講了VsCode的使用以及Node與Npm的使用，並簡單的創建了一個Expres ...


既然選擇了遠方，便只顧風雨兼程 __ 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就可以看到版本號了
    less安裝成功

  • 例子

    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就可以看到版本號了
    TypeScripts安裝成功

  • 例子

    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文件的目錄。

    • 兩種方式(文件包括，文件夾包括與不包括)

      1. 使用"files"屬性 
            "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts",
        "scanner.ts",
        "parser.ts",
        "utilities.ts",
        "binder.ts",
        "checker.ts",
        "emitter.ts",
        "program.ts",
        "commandLineParser.ts",
        "tsc.ts",
        "diagnosticInformationMap.generated.ts"
    ]
}
      2. 使用"include"和"exclude"屬性
            "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

    • 含義（配置項的含義）

      截了張圖，太長了，大家可以去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

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

  • 例子

    1. 創建例子目錄

      1. 創建目錄

      例子目錄
      例子目錄

      1. index.html

        <!doctype html>
<html>
 <head>
   <title>起步</title>
 </head>
 <body>
 <script src="main.js"></script>
 </body>
</html>

      2. index.js

        document.write("HelleWord")

    2. 打包

      • 我們使用命令webpack進行打包。會輸出下麵的字樣。有黃色警告，但是我們“dist”文件夾出現了“main.js”
        enter description here

      enter description here
      enter description here

      • 嘗試閱讀黃色信息，他告訴我們，webpack打包時是可以配置環境的，然後去官網瞭解了，4.0的打包分為“開發環境”，“生產環境”，第一個打包不會進行文件的壓縮，而“生產環境”。“開發環境”命令：webpack --mode=development，“生產環境命令”：webpack --mode=production。

      enter description here
      enter description here

      enter description here
      enter description here

    3. 預覽html，成功執行

      enter description here
      enter description here

  • webpack.config.js

webpack 的配置文件，是導出一個對象的 JavaScript 文件。我們看到別人的很多項目，在項目的根目錄都有這個文件。
文件裡面配置了各種選項，各種節點，並且是一個JavaScript的對象，可以直接代碼拿起來用。打包時的配置已這個文件優先。

看名稱我們已經知道文件的含義，就是來配置webpack怎麼打包，打包的規則是什麼。這個配置文件非常龐大，在這裡就不過多的解釋了，在以後的文章文針對每個點來寫個例子。這邊就已一個中文註釋的代碼結束這話題，大家看到中文就知道每個節點啥含義，有啥用了。那更多就到官網看咯：https://webpack.css88.com

        const path = require('path');  //引入node的path模塊

        const webpack = require('webpack'); //引入的webpack,使用lodash

        const HtmlWebpackPlugin = require('html-webpack-plugin')  //將html打包

        const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,將一部分抽離出來  

        const CopyWebpackPlugin = require('copy-webpack-plugin')

        // console.log(path.resolve(__dirname,'dist')); //物理地址拼接

        module.exports = {

            entry: './src/index.js', //入口文件  在vue-cli main.js

            output: {       //webpack如何輸出

                path: path.resolve(__dirname, 'dist'), //定位，輸出文件的目標路徑

                filename: '[name].js'

            },

            module: {       //模塊的相關配置

                rules: [     //根據文件的尾碼提供一個loader,解析規則

                    {

                        test: /\.js$/,  //es6 => es5 

                        include: [

                            path.resolve(__dirname, 'src')

                        ],

                        // exclude:[], 不匹配選項（優先順序高於test和include）

                        use: 'babel-loader'

                    },

                    {

                        test: /\.less$/,

                        use: ExtractTextPlugin.extract({

                            fallback: 'style-loader',

                            use: [

                            'css-loader',

                            'less-loader'

                            ]

                        })

                    },

                    {       //圖片loader

                        test: /\.(png|jpg|gif)$/,

                        use: [

                            {

                                loader: 'file-loader' //根據文件地址載入文件

                            }

                        ]

                    }

                ]                  

            },

            resolve: { //解析模塊的可選項  

                // modules: [ ]//模塊的查找目錄 配置其他的css等文件

                extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的擴展名

                alias: { //模快別名列表

                    utils: path.resolve(__dirname,'src/utils')

                }

            },

            plugins: [  //插進的引用, 壓縮，分離美化

                new ExtractTextPlugin('[name].css'),  //[name] 預設  也可以自定義name  聲明使用

                new HtmlWebpackPlugin({  //將模板的頭部和尾部添加css和js模板,dist 目錄發佈到伺服器上，項目包。可以直接上線

                    file: 'index.html', //打造單頁面運用 最後運行的不是這個

                    template: 'src/index.html'  //vue-cli放在跟目錄下

                }),

                new CopyWebpackPlugin([  //src下其他的文件直接複製到dist目錄下

                    { from:'src/assets/favicon.ico',to: 'favicon.ico' }

                ]),

                new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具庫是很多組件會復用的，省去了import

                    '_': 'lodash'  //引用webpack

                })

            ],

            devServer: {  //服務於webpack-dev-server  內部封裝了一個express 

                port: '8080',

                before(app) {

                    app.get('/api/test.json', (req, res) => {

                        res.json({

                            code: 200,

                            message: 'Hello World'

                        })

                    })

                }

            }



        }

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.
      enter description here

    3. 使用命令vue create projectname來創建項目

      1. 第一個選項是預設，第二個是配置化，我們選擇第二個
        enter description here

      2. 然後按照我們想要的，選擇安裝，按“空格鍵”選中
        enter description here

      3. 後面就按“Enter”一直確認了，到了選擇樣式是，我們選擇“Less”，後面就一路預設了。
        enter description here

      enter description here
      enter description here

      1. 創建好的項目
        enter description here

      2. 運行項目
        使用命令npm run serve,運行項目，http://localhost:8080 就可以看到效果了。
        enter description here

  2. 改造項目

    1. App.Vue
      那由於我們不需要Home，About的切換了，就註釋掉，直接使用"

    2. 添加界面和路由

      • 我們添加如下的兩個View
        可以看到我們css採用的less語法來寫的，script採用的ts語法來寫的。
        enter description here

      enter description here
      enter description here

      enter description here
      enter description here

      • 接下來設置路由
        enter description here

    3. 然後就可以按照上面的來運行項目，進入http://localhost:8080/#/zhihu 就可以看到效果了

    4. 使用命令npm run build，他會直接幫你打包好。然後你在伺服器上就可以運行了，無需依賴NodeJs了。

    enter description here
    enter description here

  3. 發現問題
    我們發現上面講的webpack.config.js，在該項目並沒有，那時因為Vue Cli3.0集成了在模塊裡面，並採用預設的配置來構建項目，編譯項目，打包項目，這樣我們無需搭理了。若是我們有特殊要求了，Vue將配置全部集中來根目錄vue.config.js中，我們可在根目錄創建該文件，進行配置、具體我們下篇再講。

那我也做個Express版的，源碼都在GitHub，可以上去下載來看看。

總結一下

那這篇文章，對於Less，TS，WebPack並沒有去深入講解，每個點都可以寫一篇或者更多，既然系列是零基礎，那就是瞭解個概念，知道是啥，有啥效果就可以了，或許等到真正接觸大型項目時，可以深入去瞭解。那最後也用了一個Vue的項目來演示Less與Ts，並採用Vue自帶WebPack來打包前端。無需再配置啥，真正做到你生成項目就可以在開始做，只要你有前端的基礎知識。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 數據分析入門-導論-如何親手從0到1建立一個學科
    一個學科體系的關鍵：公理-演繹-模型-同構、語言的嚴謹/精確/抽象 ...
  • SQLServer創建用戶自定義資料庫用戶
    創建用戶自定義資料庫用戶註意事項 如果已忽略 FOR LOGIN，則新的資料庫用戶將被映射到同名的SQL Server登錄名。 預設架構將是伺服器為此資料庫用戶解析對象名時將搜索的第一個架構。 除非另外指定，否則預設架構將是此資料庫用戶創建的對象所屬的架構。 如果用戶具有預設架構，則將使用預設架構。 ...
  • Redis 可視化工具 Redis Desktop Manager 和 treeNMS 的使用
    這裡介紹兩個 Redis 可視化工具。Redis Desktop Manager 和 treeNMS。 一、Redis Desktop Manager 下載地址：https://redisdesktop.com/download 網盤下載地址：鏈接：https://pan.baidu.com/s/1 ...
  • Hive與Hbase整合
    Hive與Hbase整合 1.文檔 　　Hive HBase Integration ...
  • Apache Flink 分散式運行時環境
    Tasks and Operator Chains(任務及操作鏈) 在分散式環境下，Flink將操作的子任務鏈在一起組成一個任務，每一個任務在一個線程中執行。將操作鏈在一起是一個不錯的優化:它減少了線程間的切換和緩衝，提升了吞吐量同時減低了時延。這些鏈式行為是可配置的，詳情請見: " chainin ...
  • Android遠程桌面助手(B1391)
    Android遠程桌面助手(B1391)，支持到Android9。 ...
  • Easyui datagrid combobox輸入框非法輸入判斷與事件總結
    datagrid combobox輸入框非法輸入判斷與事件總結 by:授客 QQ：1033553122 測試環境 jquery-easyui-1.5.3 常見事件 onSelect // 選擇下拉列表項時觸發的事件 onHidePanel // 收起下拉列表時觸發的事件 onChange // co ...
  • 2018/1.6 Javascript 繼承和克隆
    這種寫法不是對象克隆，就是把obj的記憶體地址賦給obj2 通過 for in 克隆 不管公有還是私有的都克隆成私有的。 js提供了一個克隆方法 objct.create() var obj2=object.create(obj) 將obj的所有屬性克隆到obj2上的所有屬性克隆obj2原型上 對象繼 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類