webpack으로 TypeScript를 변환

8350 단어 자바스크립트TypeScriptwebpack
webpack을 사용하는 대표적인 장면 중 하나가 TypeScript의 번역이 아닐까요?
여기에서는 그 순서를 간단히 정리해 둡니다.

webpack의 기본적인 이용 방법은 여기를 부탁드립니다.

준비



그럼, 준비에서. node.js는 설치되어 있다고 가정합니다.

작업장 만들기



첫째, 작업 장소 확보. 디렉토리 이름은 무엇이든 좋습니다.
package.json을 사용하고 싶으므로 npm init -f를 유지합니다.
mkdir ts-webpack
cd ts-webpack

npm init -f

모듈 설치



그런 다음 필요한 모듈 설치.
npm install --save webpack webpack-cli typescript ts-loader

필요한 파일 만들기



여기서 사용하는 모든 파일을 생성합니다.
touch index.html index.ts tsconfig.json webpack.config.js

각 파일의 사용 용도는
  • index.html은 트랜스파일 된 js의 실행을 위해 준비 (bundle.js로 출력 예정)
  • index.ts는 TypeScript 파일입니다.
  • tsconfig.json은 ts의 전송 조건을 지정합니다.
  • webpack.config.js는 번들의 조건을 지정합니다

    • 라는 느낌입니다.

    디렉토리 구조



    지금까지의 조작으로 디렉토리 구조는 아래와 같이 되어 있을 것입니다.
    .
├── bundle.js
├── index.html
├── index.ts
├── node_modules
├── package-lock.json
├── package.json
├── tsconfig.json
└── webpack.config.js

    구현



    그러면 각 파일을 편집하고 갑니다.

    index.html



    첫째, index.html. 트랜스파일 후에 생성되는 bundle.js 를 읽고 있을 뿐입니다.

    index.html
    <!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>typescript webpack test</p>
        <script src="bundle.js"></script>
    </body>
</html>

    index.ts



    다음 index.ts. 전송 전의 코드입니다.
    받은 문자열을 Hello를 붙여 출력하고 있을 뿐입니다. 인수는 반환값에 string형이 설정되어 있습니다.

    index.ts
    const Hello = (name: string): string => {
    return "Hello " + name;
}

alert(Hello('hoge'));

    tsconfig.json



    TypeScript를 어떻게 변환할지 제어합니다. 이해할 수 없다면, 처음에는 "잘못"이라는 것으로.

    tsconfig.json
    {
    "compilerOptions": {
        "target": "ESNext", //変換後の形式
        "module": "CommonJS", //モジュールの呼び出し方
        "noImplicitAny": true //型定義がないものを勝手にanyにしない
    }
}

    webpack.config.js



    마지막으로 번들 방법을 설명합니다.
  • 입력으로 index.ts
  • 출력으로 bundle.js
  • 처리는 ts-loader로 한다
  • ts, js는 확장자 생략

    • 라는 것을 정의하고 있습니다.

    webpack.config.js
    module.exports = {
    mode: 'development',
    entry: './index.ts',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js']
    }
}

    전송 및 동작 확인



    그럼 트랜스파일 해 index.html로 동작을 확인해 봅시다.

    준비: scripts 설정



    전 세계적으로 webpack이 설치되어 있지 않은 상태라면
    ./node_modules/.bin/webpack

    라는 느낌으로 wepack을 호출해야 귀찮습니다.
    그래서 package.json의 scripts에 명령을 추가합니다.
    package.json 안에서는 webpack이라고 쓰면 ./node_modules/.bin/webpack을 읽어줍니다.

    package.json
    {
  "name": "ts-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

    webpack --watch라고 하면 변경을 감시해 트랜스파일을 실행해 줍니다.

    트랜스파일


    npm start

    npm run start일 수도 있다. start, test, stop는 alias가 설정되어 있기 때문에 npm xxx로 호출할 수 있다.

    동작 확인



    실용성은 제쳐두고 index.html을 열면 alert가 표시되었습니다 (ts로 쓴 것이 js가 되어 실행되고 있습니다).



    간단합니다만, webpack을 이용하는 전형적인 이용 장면의 하나이므로 이해해 부드럽게 설정할 수 있도록 해 두는 것이 좋을 것입니다.
    Tauri와 ReactJS를 사용하여 노트북 만들기
    Javascript를 사용하여 형식화

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage