├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .prettierrc.js ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── babel.config.js ├── index.html ├── package.json ├── src ├── css │ └── index.css └── index.js ├── webpack.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | parser: '@babel/eslint-parser', 7 | extends: ['airbnb-base', 'prettier'], 8 | parserOptions: { 9 | ecmaVersion: 2021, 10 | sourceType: 'module', 11 | }, 12 | plugins: [], 13 | rules: {}, 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .eslintcache -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 120, 3 | singleQuote: true, 4 | }; 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "files.trimTrailingWhitespace": true, 4 | "editor.formatOnSave": true, 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": true 7 | }, 8 | "prettier.useEditorConfig": true, 9 | "prettier.enable": true 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 JO YUN HO 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vanilla-javascript-boilerplate 2 | 3 | - javascript boilerplate with prettier, eslint, webpack, babael 4 | 5 | 6 | 7 | ### Start 8 | 9 | ``` 10 | 1. package install 11 | yarn 12 | 13 | 2. start dev server 14 | yarn dev 15 | 16 | 3. build 17 | yarn build 18 | ``` 19 | 20 | 21 | 22 |
23 | ⚙️ setting 24 |
25 | 26 | 27 | 28 | ### 1. yarn init 29 | 30 | ``` 31 | yarn init 32 | ``` 33 | 34 | ### 2. install eslint, prettier 35 | 36 | ``` 37 | yarn add -D eslint prettier eslint-config-prettier eslint-config-airbnb-base eslint-plugin-import 38 | ``` 39 | 40 | ### 3. install webpack, webpack-dev-server 41 | 42 | ``` 43 | yarn add -D webpack webpack-cli webpack-dev-server 44 | ``` 45 | 46 | ### 4. install webpack plugins, loaders 47 | 48 | ``` 49 | yarn add -D babel-loader css-loader mini-css-extract-plugin html-webpack-plugin 50 | ``` 51 | 52 | ### 5. install babel 53 | 54 | ``` 55 | yarn add -D @babel/core @babel/eslint-parser @babel/preset-env 56 | ``` 57 | 58 | ### 6. setting lint-staged & husky 59 | 60 | #### 6-1. install package 61 | 62 | ``` 63 | yarn add -D lint-staged husky 64 | ``` 65 | 66 | #### 6-2. add config 67 | 68 | - `package.json` 69 | 70 | ``` 71 | "lint-staged": { 72 | "*.js": "eslint --cache", 73 | "*.{js,css,md,html,json}": "prettier --write" 74 | }, 75 | ``` 76 | 77 | #### 6-3. set husky 78 | 79 | - prepare husky 80 | 81 | ``` 82 | yarn husky install 83 | ``` 84 | 85 | - add pre-commit 86 | 87 | ``` 88 | npx husky add .husky/pre-commit "npx lint-staged" 89 | ``` 90 | 91 | ### (optional) install cypress 92 | 93 | - install cypress 94 | 95 | ``` 96 | yarn add -D cypress 97 | ``` 98 | 99 | - install eslint-plugin-cypress 100 | 101 | ``` 102 | yarn add -D eslint-plugin-cypress 103 | ``` 104 | 105 | - `.eslintrc.js` add config 106 | 107 | ``` 108 | extends: [plugin:cypress/recommended'], 109 | ``` 110 | 111 | 112 |
113 |
114 |
115 | 116 |
117 | 📜 config files 118 |
119 | 120 | 121 | ### .gitignore 122 | 123 | ``` 124 | node_modules 125 | .DS_Store 126 | .eslintcache 127 | ``` 128 | 129 | ### .prettierrc.js 130 | 131 | ``` 132 | module.exports = { 133 | printWidth: 120, 134 | singleQuote: true, 135 | }; 136 | ``` 137 | 138 | ### .eslintrc.js 139 | 140 | ``` 141 | module.exports = { 142 | env: { 143 | browser: true, 144 | es2021: true, 145 | }, 146 | parser: "@babel/eslint-parser", 147 | extends: ["airbnb-base", "prettier"], 148 | parserOptions: { 149 | ecmaVersion: 2021, 150 | sourceType: "module", 151 | }, 152 | plugins: [], 153 | rules: {}, 154 | }; 155 | ``` 156 | 157 | ### webpack.config.js 158 | 159 | ``` 160 | const path = require('path'); 161 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 162 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 163 | 164 | module.exports = (_, argv) => { 165 | const isDevelopment = argv.mode !== 'production'; 166 | 167 | return { 168 | entry: './src/index.js', 169 | output: { 170 | filename: 'bundle.js', 171 | path: path.resolve(__dirname, 'build'), 172 | clean: true, 173 | }, 174 | devServer: { 175 | port: 3000, 176 | hot: true, 177 | }, 178 | devtool: isDevelopment ? 'eval-source-map' : 'source-map', 179 | module: { 180 | rules: [ 181 | { 182 | test: /\.(js)$/, 183 | exclude: /node_modules/, 184 | use: { 185 | loader: 'babel-loader', 186 | options: { 187 | cacheDirectory: true, 188 | cacheCompression: false, 189 | compact: !isDevelopment, 190 | }, 191 | }, 192 | }, 193 | { 194 | test: /\.css$/, 195 | use: [MiniCssExtractPlugin.loader, 'css-loader'], 196 | }, 197 | ], 198 | }, 199 | plugins: [ 200 | new HtmlWebpackPlugin({ template: './index.html' }), // 201 | new MiniCssExtractPlugin({ filename: 'style.css' }), 202 | ], 203 | performance: { 204 | hints: isDevelopment ? 'warning' : 'error', 205 | }, 206 | }; 207 | }; 208 | ``` 209 | 210 | ### babel.config.js 211 | 212 | ``` 213 | module.exports = { 214 | presets: [ 215 | [ 216 | '@babel/preset-env', 217 | { 218 | targets: '> 1% and last 2 versions', 219 | }, 220 | ], 221 | ], 222 | }; 223 | ``` 224 | 225 | ### .editorconfig 226 | 227 | ``` 228 | root = true 229 | 230 | [*] 231 | indent_style = space 232 | indent_size = 2 233 | end_of_line = lf 234 | charset = utf-8 235 | trim_trailing_whitespace = true 236 | insert_final_newline = true 237 | ``` 238 | 239 | ### .vscode/settings.json 240 | 241 | ``` 242 | { 243 | "editor.defaultFormatter": "esbenp.prettier-vscode", 244 | "files.trimTrailingWhitespace": true, 245 | "editor.formatOnSave": true, 246 | "editor.codeActionsOnSave": { 247 | "source.fixAll.eslint": true 248 | }, 249 | "prettier.useEditorConfig": true, 250 | "prettier.enable": true, 251 | } 252 | ``` 253 | 254 | ### package.json 255 | 256 | ``` 257 | "author": { 258 | "name": "yujo", 259 | "email": "bedro27@gmail.com", 260 | "url": "https://yujo11.github.io/" 261 | }, 262 | "scripts": { 263 | "test": "yarn run cypress open", 264 | "prod": "webpack serve --mode=production", 265 | "dev": "webpack serve --mode=development", 266 | "build": "webpack --mode=production" 267 | }, 268 | ``` 269 | 270 |
271 |
272 |
273 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | targets: '> 1% and last 2 versions', 7 | }, 8 | ], 9 | ], 10 | }; 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | VanillaJS Boilerplate 8 | 9 | 10 |

11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vanilla-javascript-boilerplate", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "repository": "https://github.com/yujo11/vanilla-javascript-boilerplate.git", 6 | "author": "", 7 | "license": "MIT", 8 | "scripts": { 9 | "test": "yarn run cypress open", 10 | "prod": "webpack serve --mode=production", 11 | "dev": "webpack serve --mode=development", 12 | "build": "webpack --mode=production" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.14.0", 16 | "@babel/eslint-parser": "^7.13.14", 17 | "@babel/preset-env": "^7.14.1", 18 | "babel-loader": "^8.2.2", 19 | "css-loader": "^5.2.4", 20 | "eslint": "^7.26.0", 21 | "eslint-config-airbnb-base": "^14.2.1", 22 | "eslint-config-prettier": "^8.3.0", 23 | "eslint-plugin-import": "^2.22.1", 24 | "html-webpack-plugin": "^5.3.1", 25 | "husky": "^6.0.0", 26 | "lint-staged": "^11.0.0", 27 | "mini-css-extract-plugin": "^1.6.0", 28 | "prettier": "^2.3.0", 29 | "webpack": "^5.37.0", 30 | "webpack-cli": "^4.7.0", 31 | "webpack-dev-server": "^3.11.2" 32 | }, 33 | "lint-staged": { 34 | "*.js": "eslint --cache", 35 | "*.{js,css,md,html,json}": "prettier --write" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: grey; 3 | } 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './css/index.css'; 2 | 3 | const $h1 = document.querySelector('h1'); 4 | 5 | $h1.innerText = 'Vanilla JS boilerplate'; 6 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | module.exports = (_, argv) => { 6 | const isDevelopment = argv.mode !== 'production'; 7 | 8 | return { 9 | entry: './src/index.js', 10 | output: { 11 | filename: 'bundle.js', 12 | path: path.resolve(__dirname, 'build'), 13 | clean: true, 14 | }, 15 | devServer: { 16 | port: 5050, 17 | hot: true, 18 | }, 19 | devtool: isDevelopment ? 'eval-source-map' : 'source-map', 20 | module: { 21 | rules: [ 22 | { 23 | test: /\.(js)$/, 24 | exclude: /node_modules/, 25 | use: { 26 | loader: 'babel-loader', 27 | options: { 28 | cacheDirectory: true, 29 | cacheCompression: false, 30 | compact: !isDevelopment, 31 | }, 32 | }, 33 | }, 34 | { 35 | test: /\.css$/, 36 | use: [MiniCssExtractPlugin.loader, 'css-loader'], 37 | }, 38 | ], 39 | }, 40 | plugins: [ 41 | new HtmlWebpackPlugin({ template: './index.html' }), // 42 | new MiniCssExtractPlugin({ filename: 'style.css' }), 43 | ], 44 | performance: { 45 | hints: isDevelopment ? 'warning' : 'error', 46 | }, 47 | }; 48 | }; 49 | --------------------------------------------------------------------------------