demo06 webpack + babel7 + typescript

1.說明

本 demo06 演示 webpack 打包 babel 和 typescript ，關於 babel 和 typescript 的 webpack 單獨打包介紹，請看我以前的 demo04 和 demo05

2.關於 @babel 和 typescript 的結合

Babel 7 的發佈 中有提到 Babel 團隊與 Typescript 團隊合做，讓 Badel 使用 @babel/preset-typescript 來解析轉換類型語法。

這篇是 Typescript 團隊的相關文章：TypeScript and Babel 7

不過根據文章描述以及個人我的實踐，發現當在 Babel 配置文件中經過 @babel/preset-typescript 來編譯ts時，useBuiltIns: "usage" 沒有生效，致使我須要在 ts 中手動導入整個 @babel/polyfills ，致使整個打包結果比較大。

所以，本 demo06 暫時採用 webpack 結合 ts-loader 的方法來進行 ts 的編譯。

3.安裝相關依賴

@babel 相關

npm install --save-dev @babel/core @babel/preset-env
npm install --save @babel/polyfill //(注意沒有-dev )
複製代碼

typescript 相關

npm install --save-dev typescript
複製代碼

webpack 相關

npm install --save-dev babel-loader
npm install --save-dev ts-loader
複製代碼

4.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo06
    --src
      -app.ts
      -new-features.ts
      -User.js
    -babel.config.js
    -index.html
    -tsconfig.json
    -webpack.config.js
複製代碼

src/app.ts

import "@babel/polyfill";
import './new-features';
import { User } from './User';

const user1: User = {
  name: 'simple',
  age: '25',
  hobby: 'play the guitar'
};

// 這裏參數不夠，tsc編譯器會報錯，webpack編譯不經過
// const user2: User = {
// name: 'simple2',
// age: '25'
// };

console.log(user1);
複製代碼

src/new-features.ts

// 使用javasript的新特性，好比Promise,WeadMap,Array.prototype.includes等
// 不兼容ie 11，所以須要在應用入口(app.ts)導入@babel/polyfill包,在ie 11瀏覽器進行測試

/** * Array.prototype.includes 不兼容ie 11,詳見mdn文檔 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes * 因此須要經過@babel/polyfill來實現 */
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));

/** * new Set不兼容ie 11,詳見mdn文檔 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set */
const set1 = new Set([1, 2, 3, 4, 5]);
console.log(set1.has(1));

/** * WeakMap 的 set方法在ie 11下不支持，詳見mdn文檔 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap */
var o1 = {},
  o2 = function () { },
  o3 = window;
let weakmap = new WeakMap();
weakmap.set(o1, 1);
weakmap.set(o2, 2);
weakmap.set(o3, 3);
console.log(weakmap.get(o1));   // => 1
複製代碼

src/User.ts

// interface typescript 的類型
export interface User {
  name: String,
  age: String,
  hobby: String,
  options?: Object // 可選參數
}

// 理解一下 webpack 的 Tree Sharking?
export interface Animal {
  name: String
}
複製代碼

5.編寫 babel 配置文件

babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
        ie: "11"
      },
      // useBuiltIns: "usage" // 和ts結合的狀況，這個屬性無效，須要手動import "@babel/polyfill";
    },
  ],
];

module.exports = { presets };
複製代碼

6.編寫 tsconfig.json 配置文件

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "lib": [
      "es2018",
      "dom"
    ],
  },
  "include": [
    "./src/*"
  ],
  "exclude": [
    "./node_modules"
  ]
}
複製代碼

7.編寫 webpack 配置文件

webpack.config.js

const path = require("path");
module.exports = {
  mode: 'production' || 'development',
  entry: {
    index: "./src/app.ts"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "app.bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
}
複製代碼

8.執行打包命令

>(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

打包成功後，會在 demo06 目錄下生成 dist/bundle.js

9.驗證打包結果

建立 index.html 文件,引用打包生成的文件 (app.bundle.js), 分別用 ie , Chrome 瀏覽器打開，並查看控制檯。

輸出結果：

true
true
1
{name: "simple", age: "25", hobby: "play the guitar"}
複製代碼

10.源碼地址

demo 代碼地址: github.com/SimpleCodeC…

倉庫代碼地址(及目錄): github.com/SimpleCodeC…