[Vue.js/Typescript/Webpack] 1. 프로젝트 생성

참고 : Microsoft/TypeScript-Vue-Starter

프로젝트 폴더 생성

$ mkdir [projectName] // 프로젝트 폴더 생성
$ cd [projectName] // 프로젝트 폴더로 이동

프로젝트 구조 잡기

[projectName]
├─ assets/
├─ dist/
└─ src/
   └─ components/

assests : css, js, img, font 등의 자료를 넣을 폴더

dist : src가 webpack에 의해 번들된 결과물이 저장될 폴더

src : 소스코드(.ts) 저장소

src-components : Vue 컴포넌트 위치.

프로젝트 폴더의 npm 패키지화

$ npm init // 폴더의 npm package
 
This utility will walk you through creating a package.json file.on file.
It only covers the most common items, and tries to guess sensible defaults. sensible defaults.
                                                        e fields
See `npm help json` for definitive documentation on these fieldsand exactly what they do.
 
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
 
Press ^C at any time to quit.
 
// package.json 설정 시작
package name: (ts-vue)
version: (1.0.0)
description: typescript + vue.js + webpack
entry point: (index.js)
test command:
git repository:
keywords:
author: withham
license: (ISC)
 
// 결과물은 이렇게 될 것이다.
About to write to C:\Users\withh\Desktop\Project\ts-vue\package.json:
 
{
  "name": "ts-vue",
  "version": "1.0.0",
  "description": "typescript + vue.js + webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "withham",
  "license": "ISC"
}
 
// 괜춘한가?
Is this OK? (yes)

npm package 하기 전

후

package.json이 생겼다.

의존성 추가

npm install --save typescript webpack ts-loader css-loader vue vue-template-compiler @types/lodash

설치 결과

+ @types/lodash@4.14.118
+ ts-loader@5.3.0
+ vue@2.5.17
+ vue-template-compiler@2.5.17
+ css-loader@1.0.1
+ typescript@3.1.6
+ webpack@4.25.1
added 358 packages from 299 contributors and audited 5196 packages in 43.196s
found 0 vulnerabilities

package.json에 dependencies가 추가되었다.

- @types/lodash : typescript파일에서 javascript 라이브러리를 사용할 수 있게 함. 참고

- css-loader : css 로더. 참고

- ts-loader: typescript 로더. 참고

- typescript: typescript 사용을 위함.

- vue: vue.js 사용을 위함.

- vue-template-compiler: Vue 2.0 템플릿을 사전 컴파일하여 컴파일 오버 헤드 등을 피하기 위해 사용. 참고

- webpack: webpack 사용을 위함.

Typescript 컴파일 설정 파일 추가

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

프로젝트 루트 폴더 위치에 tsconfig.json 파일이름으로 위와 같이 추가해준다.

Webpack 설정 파일 추가

var path = require('path')
var webpack = require('webpack')
 
module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          }
        }
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}
 
if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

프로젝트 루트 폴더 위치에 webpack.config.js 파일이름으로 위와 같이 추가해준다.

일단은 예제 프로젝트에서 그대로 복붙해왔다.

이후에 필요한 부분들은 수정하면서 공부해야겠다.

Build 스크립트 추가

"scripts": {
    "build": "webpack", //추가
    "test": "echo \"Error: no test specified\" && exit 1"
}

package.json의 scripts 부분에 위와 같이 추가해준다.

$ npm run [추가한 명령스크립트 이름]

scripts에 추가한 명령어들은 콘솔에서 위와 같이 실행시킬 수 있다.

추가한 build 스크립트를 실행하려면 콘솔화면에서

$ npm run build

와 같이 하면된다.

// webpack.config.js
module.exports = {
  output: { // output 설정
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/', // 폴더 경로
    filename: 'build.js' // webpack 결과물 파일 이름
  },

webpack.config.js에서 output 설정을 위와 같이 해줬으므로 "npm run build"를 하면 /dist/build.js 이 생성될 것이다.

index.ts 추가

webpack.config.js를 보면

module.exports = {
  entry: './src/index.ts', // 앱의 시작 

앱의 시작 파일 위치가 src폴더에 index.ts이다.

따라서 src 폴더에 index.ts를 생성한다.

---------- 추가한 파일 -------------

// src/index.ts
import Vue from "vue";
import Index from "./components/Index";
 
let v = new Vue({
    el: "#app",
    template: `
    <div>
    hi
    <Index/>
    </div>`,
    components: {
        Index
    }
});

시작 파일은 위와 같이 작성한다.

template을 보면 "hi"라는 텍스트를 찍어주고 "Index"컴포넌트를 component 폴더에서 가져와서 그대로 뿌려준다.

Index 모듈은 "./components/Index" 폴더에 위치한다.

// src/components/Index/index.ts
import { Vue, Component, Prop } from "vue-property-decorator";
 
@Component({
    template: require('./Index.html')
})
export default class Index extends Vue {
}

"./components/Index" 폴더의 입구(?)에 해당하는 파일이다.

"index.ts" 라고 지어줘야 한다. (class 이름이 Index여서 index.ts라고 지은것이 아님)

template은 같은 폴더위치의 Index.html을 사용한다.

// src/components/Index/Index.html
<div>
    Index
</div>

템플릿은 다음과 같다.

Index 텍스트를 화면에 뿌려준다.

즉, src/index.ts에서 "hi"를 먼저 화면에 뿌려주고 Index 컴포넌트를 화면에 뿌려주기 때문에

hi
Index

위와 같은 텍스트가 화면에 보여야 정상적인 작동이다.

--------------------------------------

$ npm install --save vue-property-decorator

콘솔에서 위 명령어로 vue-property-decorator 의존성을 추가한다.

//package.json
"dependencies": {
    "vue-property-decorator": "^7.2.0", //

package.json에서 vue-property-decorator 의존성이 추가된다.

그러면 @Component같은걸 사용할 수 있는데 빨간줄이 생겼다.

읽어보니 experimentalDecorators 옵션을 설정하라고한다.

// tsconfig.json
"compilerOptions": {
    "experimentalDecorators": true // 추가

tsconfig.json 컴파일옵션에 experimentalDecorators를 추가한다.

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

추가한 뒤 다시 npm run build 를 해보면 위와 같은 warning 발생.

에러에서 알려준 링크로 이동해서 보면 모드를 설정하라고 한다.

// webpack.config.js
module.exports = {
  mode: 'development', // 추가

webpack.config.js 파일에서 모드를 위와 같이 추가해준다.

// package.json
{
  "scripts": {
    // "build": "webpack",
    "build": "webpack --mode=development", // 수정
  }
}

package.json에서 스크립트를 위와 같이 수정했다.

이제 "npm run build"를 하면 warning이 없어진 것을 확인할 수 있다. 

이번에는 'require' 이름을 찾을 수 없다고 한다.

$ npm install --save require

require 인스톨해보지만 그래도 똑같이 빨간줄이 뜬다.

[tsl] ERROR in C:\Users\withh\Desktop\Project\ts-vue\src\components\Index\index.ts(4,15)
      TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node`.

찾다가 안되서 "npm run build"를 한 번 쳐보니까 콘솔에 위와 같은 에러가 뜬다.

$ npm i @types/node

위에서 말한것과 같이 위 명령어를 콘솔에서 실행하면 해결할 수 있다.

@types/node가 필요했던 것이다. 찾아보니 @types/node는 Node.js에서 제공하는 타입 정의를 포함한다고 하는데 이걸통해 require를 찾는 듯 하다.

@types/node 참고

ERROR in ./src/components/Index/Index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <div>
|     hi
| </div>
 @ ./src/components/Index/index.ts 28:22-45
 @ ./src/index.ts

이번에는 위와 같은 에러 발생.

웹팩 설정에서 html에 대한 로더 설정이 없어서 발생한 에러같다.

$ npm install --save raw-loader

cs

위 명령어로 raw-loader 의존성 추가.

//webpack.config.js
module.exports = {
  module: {
    rules: [
      // 추가
      {
        test: /\.html$/,
        loader: 'raw-loader'
      },

webpack 설정파일에서 위 코드를 추가한다.

raw-loader는 파일을 문자열로 읽어온다고 한다. 

raw-loader 참고

다시 빌드 해보면 잘 돌아간다.

이제 build한 결과를 눈으로 확인해보자.

// dist/index.html
<!doctype html>
<html>
<head></head>
 
<body>
    <div id="app"></div>
</body>
<script src="./build.js"></script>
 
</html>

위 html 파일을 dist폴더에 작성하고 실행해보면 build 결과를 확인할 수 있다.

간단하게 보자면 webpack 결과물인 build.js를 가져오는데 src/index.ts 파일에서 우리가 Vue의 최종결과물의 엘리먼트 id를 el: "#app"으로 지정했다.

따라서 <div id="app"/>이라고 작성하였다.

잘 나오는 것을 확인할 수 있다.

참고 깃허브