이 시리즈의 이전 글은 아래로...
실제 작업을 위한 환경 설정을 해보쟈!
config/#1_Project-Setting
브랜치에서 자세히 확인 하실 수 있습니다! 😊
npm init -y
//.gitignore
# dependencies
/node_modules
# production
/dist
# etc
.DS_Store
.vscode
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin
// package.json
...
{
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --open"
}
}
// webpack.config.js
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js',
clean: true
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/images/[name][ext]'
},
},
]
},
devtool: "inline-source-map",
devServer: {
client: {
logging: 'none'
}
},
plugins: [
new HtmlPlugin({
template: './public/index.html',
favicon: path.resolve(__dirname, 'public/favicon.ico')
}),
new CopyPlugin({
patterns: [
{ from: 'public/favicon.ico'}
]
})
]
}
npm i -D typescript ts-loader tsconfig-paths-webpack-plugin
// tsconfig.path.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@assets": ["./assets"],
"@assets/*": ["./assets/*"],
"@api": ["./api"],
"@api/*": ["./api/*"],
"@services": ["./services"],
"@services/*": ["./services/*"],
"@utils": ["./utils"],
"@utils/*": ["./utils/*"],
"@constants": ["./data/constants"],
"@constants/*": ["./data/constants/*"],
"@models": ["./data/models"],
"@models/*": ["./data/models/*"],
"@router": ["./router"],
"@router/*": ["./router/*"],
"@components": ["./components"],
"@components/*": ["./components/*"],
"@hooks": ["./hooks"],
"@hooks/*": ["./hooks/*"],
"@core": ["./components/core"],
"@core/*": ["./components/core/*"],
"@base": ["./components/base"],
"@base/*": ["./components/base/*"],
"@domain": ["./components/domain"],
"@domain/*": ["./components/domain/*"],
}
}
}
// tsconfg.json
{
"extends": "./tsconfig.path.json",
"include": ["src/**/*"],
"outDir": "./dist/js",
"compilerOptions": {
"baseUrl": "src",
"target": "es5",
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
"module": "esnext",
"moduleResolution": "Node",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"strict": true,
"resolveJsonModule": true
}
}
// webpack.config.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const tsConfigPath = path.resolve(__dirname, "./tsconfig.json")
module.exports = {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js'],
plugins:[
new TsconfigPathsPlugin({
configFile: tsConfigPath
})
]
},
module: {
rules: [
...
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
}
npm i -D sass sass-loader css-loader mini-css-extract-plugin
// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
rules: [
...
{
test: /\.s[ac]ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
exclude: /node_modules/
}
]
},
plugins: [
...
new MiniCssExtractPlugin({
filename: 'assets/css/style.[contenthash].css',
})
]
}
npm i -D @babel/core @babel/preset-env @babel/preset-typescript @babel/plugin-proposal-class-properties
npm i core-js whatwg-fetch
// webpack.config.js
module.exports = {
module: {
rules: [
...
{
test: /\.m?js$/,
include: [path.resolve(__dirname, 'src')],
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}],
"@babel/preset-typescript"
],
plugins: ["@babel/plugin-proposal-class-properties"]
}
}
}
]
}
}
npm i -D eslint eslint-plugin-import-helpers @typescript-eslint/parser @typescript-eslint/eslint-plugin
// .eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json'
},
plugins: ['@typescript-eslint', 'eslint-plugin-import-helpers'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
ignorePatterns: ['webpack.config.js','**/*.config.js', '.eslintrc.js'],
rules: {
'import-helpers/order-imports': [
'error', {
newlinesBetween: 'never',
groups: [
'absolute',
'module',
['parent', 'sibling', 'index'],
'/^@shared/',
],
alphabetize: { order: 'asc', ignoreCase: true },
},
],
'no-prototype-builtins': 0,
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
'@typescript-eslint/consistent-type-imports': 'error',
'@typescript-eslint/explicit-function-return-type': 'error',
'@typescript-eslint/member-ordering': 'error',
'@typescript-eslint/method-signature-style': ['error', 'method'],
'@typescript-eslint/no-confusing-void-expression': 'error',
'@typescript-eslint/no-duplicate-imports': 'error',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/type-annotation-spacing': ['error', {
before: false,
after: true,
overrides: { colon: { before: true, after: true }}
}]
}
}
// package.json
"scripts": {
...
"lint": "eslint ./src/**/*.ts",
"lint:fix": "tsc --noEmit && eslint --fix ./src/**/*.ts"
},
npm i -D prettier eslint-plugin-prettier eslint-config-prettier
// .prettierrc.json
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "avoid",
"endOfLine": "auto"
}
# 완성본을 다운받은 경우, npm install
npm run dev
// ./src/main.ts
export const test = 'test'
console.log(test)