demo06 webpack + babel7 + typescript

1. 설명
이 demo 06 은 웹 팩 포장 babel 과 typescript 을 보 여 줍 니 다. babel 과 typescript 에 관 한 웹 팩 은 따로 포장 소 개 를 보 여 줍 니 다. 이전 demo 04 와 demo 05 를 보 세 요.
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 / poly fills 를 수 동 으로 가 져 와 야 하기 때문에 전체 포장 결과 가 비교적 큽 니 다.
따라서 본 demo 06 은 잠시 웹 팩 과 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

웹 팩 관련

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

포장 에 성공 하면 demo 06 디 렉 터 리 에서 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 / Simple CodeC...
창고 코드 주소 (및 디 렉 터 리): github. com / Simple CodeC...