當前位置：
首頁 > 知識 > Less與TypeScript的簡單理解與應用，並使用WebPack打包靜態頁面

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

知識 01-07

該篇文章講述的是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與TypeScript的簡單理解與應用，並使用WebPack打包靜態頁面

  • 例子
  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%) }
}

  1. 使用lessc styles.less > styles.css
  2. 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就可以看到版本號了

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

  • 例子
  1. greeter.ts

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

  1. 使用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文件，逐級向上搜索父目錄。
  3. 不帶任何輸入文件的情況下調用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"
]
}

  1. 使用"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. 創建例子目錄
  2. 創建目錄

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

  2. 例子目錄
  4. index.html

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

  1. index.js

document.write("HelleWord")

  1. 打包
  • 我們使用命令webpack進行打包。會輸出下面的字樣。有黃色警告，但是我們「dist」文件夾出現了「main.js」

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

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

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

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

  2. enter description here

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

  2. enter description here
  4. 預覽html，成功執行

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

  2. 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還有很多需要理解的，比如「模塊熱替換」,"懶載入"等等，後面有機會再講。

作者：HANS許

原文：https://www.cnblogs.com/xuhuale/p/10229627.html

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※vi使用方法詳細介紹
※springmvc訪問靜態資源的方式

TAG:程序員小新人學習 |