心理學之茶哥分享：前端包管理工具整理

時間  2019-12-07
標籤 心理學 分享 前端 包管 工具 整理 简体版
原文   原文鏈接

你們好，今天由我給你們帶來前端心理學茶哥的分享總結。javascript

茶哥是位聲音酥酥的小姐姐👧，總結的知識點也是滿滿的乾貨，接下來我將對茶哥分享的內容進行整理，以供你們查閱。css

首先，前端有不少名詞html

// 包管理工具
npm
bower
yarn
// 構建
webpack
Grunt
Gulp
require.js
Brunch
parcel
Browserify
Yeoman
Brunch
Broccoli
// 模塊定義規範
AMD
CMD
UMD
CommonJS
複製代碼

咱們將這些名詞分下類，前面幾個包管理工具，中間部分是構建類的工具，後面的一部分是模塊定義規範。前端

雖然好久之前前端可能就是單純的寫簡單頁面的，但現代開發實際狀況變得更加複雜。好比遊戲開發，時間等等插件都有不一樣庫，所以咱們須要包管理工具來管理這些庫。java

模塊定義規範

如何對這些包進行相互間的管理，咱們就須要用模塊定義規範來進行約束。node

在早期的時候咱們使用script標籤來引入js文件。jquery

<script src="jquery.js"></script>
複製代碼

可是這樣會有很大的弊端：在大型項目中咱們須要手動來管理引用文件、各個js文件的執行順序和先後依賴混亂、命名空間可能會衝突等等。長此以往，這樣會造成一個很是臃腫的難以維護的代碼庫。webpack

如今主流的包安裝工具npm和其餘的包安裝工具都有的各自的特色，好比說安裝簡單，易用易上手等等。git

如今的模塊規範有commonjs、cmd、amd、umd等 ，在webpack中主要是commonjs，可是也支持amd，還對一些不支持模塊規範的很老的庫支持Polyfill墊片。github

咱們先簡單講下最多見的模塊定義規範。 首先咱們講下commonjs，commonjs中一個文件就是一個模塊，他主要使用require來同步加載模塊，最後呢，將要輸出的變量或者方法添加單export上面

const someFun= require('./moduleA');//引入
module.export=something //導出
複製代碼

這種方式比較適用於服務器端，全部的模塊已經保存在服務器端，所以加載起來比較快。

可是在瀏覽器中明顯很不合適，考慮到會形成同步阻塞，所以有了異步加載模式amd

// 基本語法
define(id,dependences,function(require,exports,module){})
// 建立一個名爲"alpha"的模塊，使用了require，exports，和名爲"beta"的模塊:
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
    exports.verb = function() {
       return beta.verb();
       // Or:
       return require("beta").verb();
    }
});
複製代碼

Webpack

webpack是資源模塊化管理打包工具，webpack前身有grunt、gulp，webpack有二者相同的功能，可是又和他們不一樣：webpack是模塊管理工具，後面二者更相似於任務管理器。

但實際項目中，webpack最重要的是配置好配置文件。

安裝webpack

咱們接下來說下webpack的安裝

咱們能夠先安裝nodejs，nodejs自帶軟件管理包npm，咱們就能夠用npm安裝webpack(如下操做也可使用yarn操做，大同小異)。

webpack有兩種方式，全局安裝和局部安裝。

咱們建議局部安裝，這樣webpack有升級也不會影響到咱們本地的項目，有興趣的也能夠看看npx命令。

npm i weback -D
複製代碼

在webpack升級到4的時候，咱們必須安裝webpack-cli不然沒法啓動webpack

npm i weback-cli -D
複製代碼

運行webpack有幾種方式:

  • 第一種是在終端經過命令：webpack + 文件路徑+webpack參數來啓動，這樣比較繁瑣。

  • 另外一種是經過webpack.config.js配置文件來啓動項目。這個文件實際是一個nodejs模塊，返回一個json的配置對象。webpack結合配置文件就能夠了。

  • 還有一種方式經過npm的package.json文件的scripts屬性裏面配置

"script":{"open": "webpack --progress --colors --watch"}
複製代碼

而後運行npm run open便可。

基本項目

如今咱們新建一個項目

// -y是執行默認行爲
npm init -y
複製代碼

項目結構

app/
  entry.js
  sub.js
  index.html
package.json
webpack.config.js
複製代碼

entry.js就是入口文件

var sub = require('./sub.js');
var app  = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);
複製代碼

sub.js

// 咱們在這裏使用commonjs的風格
function generatorText(){
  var element=ducumnt.createElement('h2');
  element.innerHTML='Hello h2';
  return element
}
module.exports=generatorText
複製代碼

index.html是html模板，爲了展現執行js的效果，咱們就簡單引入html的模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>
複製代碼

webpack配置

接下來重點講下webpack.config.js的內容。這個文件主要分爲兩個部分，第一部分是引入各個模塊，第二個部分就是模塊導出對象，這個是重點。

var webpack=require('wenpack');
const path = require("path");
module.exports={
  mode:'development',
  entry:'./entry.js',
  output:{
    path:path.resolve(__dirname, 'dist'),,
    filename:'bundle-[hash:8].js'
  },
  module:{},
  plugins: [],
  
}
複製代碼

第一個部分就是commonjs用require引入模塊

這裏有些是webpack自帶的模塊，還有一些是node裏面的模塊。好比path，就是爲了不多端的路徑產生問題。

其中第一個是entry屬性，這是入口js文件。當代碼啓動的時候，首先執行的就是入口文件，其餘的模塊是等到遇到require方法纔開始執行的。能夠指定一個文件，也能夠指定多個文件。

而後是output屬性，這個是設置webpack將轉換好的模塊打包的位置。裏面有多個選項配置，path 路徑，filename文件名，這裏可使用hash屬性來防止瀏覽器進行緩存。 還能夠對多個公共模塊進行提取，這個稍後講。

第三個重點呢就是module ，就是node轉換器，用於將其餘文件類型，css jsx 圖片。由於webpack只能處理js，所以要用轉換器來對這些文件類型轉換打包

配置的mode是webpack4新增的一條屬性，它的意思爲當前開發的環境,能夠爲"development"或者"production"

更多基本的屬性能夠參閱webpack文檔

插件1：html-webpack-plugin

除此以外，咱們雖然設置了html模板，咱們要引入html-webpack-plugin插件來進行配置才能使用。

安裝

npm i html-webpack-plugin -D
複製代碼

配置

// webpack.config.js中增長配置
 ···
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 // 在plugins數組添加
  new HtmlWebpackPlugin({
      title: "My App",
      filename: "index.html",
      template: "./app/index.html",
      hash: true
    }),
 ···
複製代碼

插件2：clean-webpack-plugin

如今咱們執行npx webpack就會在dist文件夾生成文件

dist/
    bundle-8cecda3d.js
    bundle-xxxxxxxx.js
    bundle-xxxxxxxx.js
    index.html
複製代碼

生成每次帶有hash的文件並不會自動清除，咱們可使用clean-webpack-plugin插件，來清除多餘的文件。 安裝

npm i clean-webpack-plugin -D
複製代碼

配置

// webpack.config.js中增長配置
···
// 清除dist文件的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
//在plugins數組中添加
new CleanWebpackPlugin(),
···
複製代碼

插件3：webpack-dev-server

webpack自帶本地服務器，能夠在devServer進行配置。固然咱們也可使用node服務器，或者apache配置。

如今講一下devServer屬性配置

npm i webpack-dev-server -D
複製代碼
// webpack.config.js中增長配置
...
devServer:{
  // 這個屬性主要用於SPA，單頁面開發時，若是設置爲true，全部的跳轉將指向index
  historyApiFallback:true,
  // 啓用 webpack 的 模塊熱替換 功能
  hot:true,
  // 處理實時重載的腳本被插入到你的包(bundle)中，而且構建消息將會出如今瀏覽器控制檯
  inline:true,
  // 默認webpack以項目根目錄爲起始路徑，若是你想指定目錄能夠在這裏設置、
  contentBase: path.join(__dirname, 'dist'),
  // 將運行進度輸出到控制檯
  progress:true，
  // 設置監聽端口，默認8080
  port:3002，
  // 自動打開瀏覽器
  open:true
}
...
複製代碼

先執行npx webpack再執行npx webpack-dev-server，這樣，咱們就能夠在瀏覽器中看到咱們的頁面了。

此時，將以上命令聯合，能夠配置在package.json的scripts中，好比 

"scripts": {
    "dev": "npx webpack && npx webpack-dev-server"
  }
複製代碼

額外插件介紹

在實際開發目錄中，咱們可使用雙服務器模式，可使用中間件webpack-dev-middleware，可是隻能在生產環境使用。他能夠在內存中實時打包，生成虛擬文件，供瀏覽器實時訪問以及調試。

這裏推薦一個插件，叫作打包面板Webpack-dashboard，使用效果以下圖，看起來頁面更加簡潔。

結語

原本茶哥週四已經分享了的，可是我週末有團建，周天又去參加社區活動，這才延遲了總結時間，真心感到抱歉。

以上就是前端心理學茶哥的分享總結，感謝茶哥的分享🙌。讓咱們期待茶哥的下一次分享，你們一塊兒學習進步。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程