告別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。
```javascript
    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

  ![Paste_Image.png](//upload-images.jianshu.io/upload_images/1076822-2640c08d1e54a9b2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

13.  編譯完成后，我們可以看到dist文件夾已經出現了app.js和app.js.map，map文件是用來調試時做關聯的。現在改動一下index.html，引用這個app.js

![Paste_Image.png](//upload-images.jianshu.io/upload_images/1076822-97c0fca080d8cf36.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
14.  現在可以打開index.html來看看，每當我們點擊按鈕，就會添加一條評論。

![Paste_Image.png](//upload-images.jianshu.io/upload_images/1076822-9cb572fd25549f4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 
  
15. 現在我們的jquery已經可以和typescript以及webpack一起使用了。但是這只是開始，我們知道了如何寫一個簡單的typescript類，如何引入jquery來使用，如何讓它們配合使用，下一節，我們將引入下面的新東西

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