從jquery轉型 （一）

背景

很多很多傳統的Web開發者還在用著傳統的jquery和ES5，大家都知道現在的前端如火如荼，但是眼花繚亂的框架和層出不窮的新概念，讓很多人無從下手，本文從0開始，帶你一步步由jquery操作DOM轉型成為一個新思想的前端開發者。沒有過多的引申和概念解釋。先上手實踐，再回頭體會。讓我們開始。（本系列預設認為學習者有使用搜索引擎學習概念和解決問題的能力）

目標

使用Typescript+Webpack+jquery開發，一個簡單列表，一個按鈕，點擊按鈕，在列表裡增加一條新記錄，記錄的後面顯示本記錄創建的時間，起初我們先使用jquey, 然後我們再放棄它。再放棄它之前，我們先學會怎麼在Typescript里使用jquery。

• 框架/庫/工具：
  1. Typescript（如果你懂C#或者Java，這個用起來會很簡單。)
  2. Webpack （最主流熱門的打包工具，React/Angular/Vue都在用它）
  3. jquery
  4. Visual Studio Code
  5. ConsoleZ (Win下很好用的一款命令行工具)
• 開始
  1. 首先，你要安裝過NodeJS，如果沒有，先去安裝，因為我們需要使用NPM來安裝管理依賴，直接去官網下載安裝就可以。
  2. 安裝完NodeJS之後，因為網路原因，有時候NPM會非常慢，替換為淘寶的NPM鏡像

  3. 打開VSCode，找個你喜歡的位置，創建一個文件夾，然後新建一個index.html
     

     
  4. 寫入一個基本的html頁面結構，新建兩個文件夾，src和dist，我們的typescript文件會放在src里，編譯後的js文件在dist里。
     
     

  5. 打開你的命令行工具，cmd，powershell或者git bash。這裡我使用的是ConsoleZ，如果喜歡的話，可以在這裡找到怎麼安裝使用。在此工作目錄下，使用

     npm init

     然後一路輸入，初始化一個package.json，這個文件就是你前端工程化的一個配置文件。
     

  6. 現在來使用npm安裝開發要使用的依賴，typescript，webpack，為了讓webpack可以裝載typescript，還要安裝兩個loader：awesome-typescript-loader，source-map-loader。因為這些都只是開發階段要用的工具，並不是最終代碼要使用的庫，所以加上-dev
     npm install typescript webpack awesome-typescript-loader source-map-loader --save-dev
  7. 安裝jquery，這次是要使用在正式環境里的，所以不需要加上-dev，(這裡我們使用了npm來引入jquery，不在使用在頁面上使用< script>標簽來引入的方式)
     npm install jquery --save
  8. 因為我們是在typescript里使用jquery，所以我們需要添加jquery的@types，為了能讓typescript使用它的類型
     npm install @types/jquery --save

  9. 在根目錄下添加tsconfig.json文件，這個文件是用來配置typescript的，我們可以看到，是把src目錄下的所有文件編譯到dist目錄下，編譯成es5

     {
         "compilerOptions": {
             "outDir": "./dist/",
             "sourceMap": true,
             "noImplicitAny": false,
             "module": "commonjs",
             "target": "es5",
             "allowJs": true
         },
         "include": [
             "./src/*"
         ],
         "exclude": [
             "node_modules"
         ]
     }

  10. 接下來配置webpack，讓webpack來打包typescript文件，在根目錄下添加webpack.config.js，配置typescirpt loader。

      module.exports = {
          entry: "./src/app.ts",
          output: {
              filename: "app.js",
              path: __dirname + "/dist"
          },
          devtool: "source-map",
      
          resolve: {
              extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
          },
          module: {
              rules: [
                  {
                      test: /\.js$/,
                      enforce: "pre",
                      loader: "source-map-loader"
                  },
                  {
                      enforce: 'pre',
                      test: /\.tsx?$/,
                      use: "source-map-loader"
                  },
                  {
                      test: /\.tsx?$/,
                      loader: 'awesome-typescript-loader',
                      exclude: /node_modules/
                  },
              ]
          },
          externals: {},
      }

  11. 好了，讓我們來寫一些代碼。在app.ts里，寫一個App類，然後使用它

      import * as $ from "jquery";
      export class App {
          public addComment():void {
              let creatAt = new Date();
              $("#main").append("<div><span>new comment pushed at."+creatAt.toTimeString()+"</span>");
          }
      }
      let app = new App();
      //jquery $()
      $(()=>{
          $("#btn-add").click(app.addComment);
      });

  12. 現在可以編譯了，如果我們沒有使用webpack，我們需要使用tsc命令來編譯typescript，現在我們使用了webpack，直接在命令行輸入webpack就可以了
      webpack
      註意，如果提示沒有webpack命令，安裝webpack到全局
      npm install webpack -g

  

  1. 編譯完成後，我們可以看到dist文件夾已經出現了app.js和app.js.map，map文件是用來調試時做關聯的。現在改動一下index.html，引用這個app.js
  
  1. 現在可以打開index.html來看看，每當我們點擊按鈕，就會添加一條評論。

  

  1. 現在我們的jquery已經可以和typescript以及webpack一起使用了。但是這隻是開始，我們知道瞭如何寫一個簡單的typescript類，如何引入jquery來使用，如何讓它們配合使用，下一節，我們將引入下麵的新東西

     1，目前我們的頁面還是以一個本地文件的方式在瀏覽器里打開的，下一節我們要使用一個本地的簡易web伺服器來承載它，並且可以在有任何改動的時候自動刷新頁面。
     2，我們要使用整合的npm script命令（npm start）來一次完成編譯，運行兩個步驟。
     3，我們要引入moment庫，來給每一條評論後面顯示一個發佈後到現在的時間差信息，就像下麵的圖
     4，我們要改造這個評論列表，使用React或Angualar創建一個Component