Webpack에 Vue3+Type Script+Sass+ESlint+Babel의 환경을 구축하세요.

개시하다

안녕하세요, 저는 도쿄도 내의 전단 엔지니어입니다.
자기소개는 옆에 두고 Vue3는 2, 3주 전쯤 순조롭게 발표됐다.
https://github.com/vuejs/vue-next
Vue3은 기존 Vue2보다 Type Script를 쉽게 적용할 수 있습니다...
앞으로의 활약을 기대할 수 있다는 뜻!
리액션이 안 좋아요?이런 목소리도 있지만 프로젝트 구성이 그다지 크지 않은 프로젝트에서 유용하거나 전통 프로젝트에서 현대 프로젝트로 전환할 때 도입 원가가 리액트보다 낮고 전환이 저렴하다는 장점도 있다.
또 뷰는 아시아권 내에서 적극적으로 참여하는 위원 여러분을 계속 지켜볼 예정이다.
그래서 현대의 선행 환경에서 더 좋은 개발 체험을 하기 위해 이 글을 썼습니다.
웹팩 설정과.tsconfig 설정 등 힘든 점 등을 말해주면 어떨까 싶어요.
이 문장의 대상으로서 우리는 다음과 같은 몇 분을 구상하였다.

프런트엔드 환경에 조금 노출된 구축 환경

Webpack의 환경 구축에 어려움이 있었다

요건을 구성하다

우선, Webpack의 환경이 다음과 같은 내용을 포함한다고 가정하자.

Vue3

TypeScript

Sass

ESlint(airbnb)

Babel

카탈로그 구성은 다음을 참조하십시오.
https://github.com/olt556/vue3-template

차리다

필요한 모듈 설치 및 npm 스크립트 설정

우선package.json을 다음과 같이 설정하십시오.

{
  "name": "vue3-tmplate",
  "version": "1.0.0",
  "description": "",
  "main": "main.ts",
  "scripts": {
    "build-dev": "webpack",
    "build-prod": "webpack --env.prod",
    "start": "webpack-dev-server",
    "lint-check": "./node_modules/.bin/eslint src -c ./.eslintrc --ext ts,tsx,vue; exit 0",
    "lint-fix": "./node_modules/.bin/eslint --fix src -c ./.eslintrc --ext ts,tsx,vue; exit 0"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@typescript-eslint/eslint-plugin": "^4.3.0",
    "@typescript-eslint/parser": "^4.3.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.2",
    "eslint": "^7.10.0",
    "eslint-config-airbnb-base": "^14.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.0.0-beta.4",
    "eslint-plugin-vue-scoped-css": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.11.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.2",
    "ts-loader": "^8.0.4",
    "typescript": "^4.0.3",
    "vue-loader": "^16.0.0-beta.8",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

이후
실행

npm i

.
아무튼 必要なnpmモジュール 설치됐습니다.
npm 스크립트는 생산 구축과 개발 환경 구축으로 나뉜다
vue, ts, tsx 파일에 ESlint를 적용할 수 있도록 설정합니다.

Babel 설정

바벨이 사용한 설정은 대체로 대응할 수 있다IE11..babelrc는 다음과 같다.

{
  "presets": [
    [
      "@babel/preset-env",
        {
          "targets": {
            "ie": 11,
            "esmodules": true
          },
          "useBuiltIns": "usage",
          "corejs": 3
        }
      ]
  ]
}

ESLight 설정

ESLit에서 사용하는 설정은 Vue3뿐만 아니라 Scped CSS 및 TS 파일에도 적용됩니다.에어뱅크의 ESlint 설정을 약간 개조한 것을 사용했다..eslintlrc는 다음과 같다.

{
  "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended",
    "plugin:vue-scoped-css/vue3-recommended"
  ],
  "plugins": [
    "@typescript-eslint",
    "vue"
  ],
  "env": {
    "node": true,
    "es6": true
  },
  "parser": "vue-eslint-parser", // これがないとVueファイルのtemplateがパースできません
  "parserOptions": {
    "parser": "@typescript-eslint/parser", // TSファイル用のパーサをここで定義します
    "ecmaFeatures": {
      "jsx": true
    },
    "extraFileExtensions": [
      "vue", // Vueファイルのパース用に必要です
      "ts",
      "tsx"
    ],
    "project": "./tsconfig.json", // .tsconfigを読み込みます
    "useJSXTextNode": true
  },
  "rules": {
    "import/no-unresolved": "off", // aliasを利用する場合必要です
    "semi": "off",
    "trailingComma": "off"
  }
}

tsconfig 설정

.tsconfig는 다음과 같다.
내용은 필요에 따라 평론에 기재될 것이다.

{
  "compilerOptions": {
    "sourceMap": true,
    "allowJs": true, // JSを許可します
    "strict": true, // 型の恩恵を受けるために必須です
    "module": "ESNext", // moduleを読み込む際はESNext形式で読み込みます
    "target": "es5", // es5の形式にトランスパイルします
    "lib": [ // 各種ライブラリを呼び出せます
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "esModuleInterop": true, // モジュールのimport形式のESModules形式とCommonJS形式との互換性のために必須
  "baseUrl": "./",
  "paths": {
    "@/*": "src/*",
  },
  "include": [
    "src",
  ],
  "exclude": [
    "node_modules"
  ],
}

웹 패키지 환경 설정

webpack.config.js의 설정은 다음과 같습니다.

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {
  VueLoaderPlugin
} = require('vue-loader')

module.exports = (env = {}) => ({
  mode: env.prod ? 'production' : 'development',
  devtool: env.prod ? 'source-map' : '',
  entry: path.resolve(__dirname, './src/main.ts'),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    port: 8080,
    historyApiFallback: true, // without no routing
  },
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules')],
    alias: {
      '@': path.resolve(__dirname, './src'),
      'vue': '@vue/runtime-dom' // これがないとvue-compilerがVueファイルを認識しません
    },
    extensions: ['.vue', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        test: [/\.vue$/],
        loader: 'vue-loader',
      },
      {
        test: /\.sass$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: !env.prod }
          },
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: { indentedSyntax: true }
            }
          }
        ]
      },
      {
        test: [/\.ts$/, /\.tsx$/],
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'ts-loader',
            options: {
              appendTsSuffixTo: [/\.vue$/] // これがないとTSファイル内でVueファイルを読み込めません
            }
          }
        ]
      }
    ],
  },
  plugins: [
    new VueLoaderPlugin(), // VueLoaderPluginがVue3用に必要です
    new HtmlWebpackPlugin({
      publicPath: 'dist',
      filename: 'index.html',
      template: 'src/html/index.html',
    }),
    new MiniCssExtractPlugin({
      publicPath: 'dist',
      filename: '[name].css',
    }),
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false'
    })
  ],
})

주의 사항

eslint-plugin-vue와 vue-loader에 관해서는 2020년/09/30 현재 베타판이기 때문에 앞으로 파괴적인 변경이 있을 수 있습니다.

끝말

오랫동안 읽어주셔서 감사합니다.
프런트 환경 구축에 참고가 됐으면 좋겠어요.
만약 의문이나 잘못된 지적이 있으면 사양하지 마세요!