🎁 Module bundler 검색 결과

해당 글 13건

icon를 rollup으로 번들링해서 npm publish하자

많은 부분을 velopert의 글을 참고 했다. 사실상 베끼는 것과 다름 없었기에.. https://velog.io/@velopert/bundle-with-rollup-and-publish-to-npm#typescript-declaration-%ED%8C%8C%EC%9D%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0 초반 세팅 esm만 지원해도 괜찮은가 https://antfu.me/posts/publish-esm-and-cjs 알아둬야 하는 것들 By default, Rollup will expect config files to be ES modules and bundle and transpile them and their relative imports to CommonJS before req..
🎁 Module bundler/🧻 Rollup 2021. 12. 20. 21:39

From neutrino v9 to Webpack v4 이전

교체 이유 neutrino를 교체하고자 하였으니, 저희가 사용 중인 neutrino 9버전에서는 typescript presets이 존재하지 않는다는 것을 알게 되었습니다. 뿐만 아니라 neutrino로 비롯한 매우 다양한 문제가 있었다. 1. neutrino-eslint를 사용하여 우리가 필요한 별도의 eslint 추가 구성을 하기에 불편했다. + 추가로 prettier-standard라는, lint와 formatter를 합친 지옥 같은 녀석이 neutrino와 맞물려 매우 불편했다. 2. webpack 코드를 구성해야 하는데 netrino는 이를 black box로 처리하여 커스텀하기 불편했다. + typescript 마이그레이션하는데 neutrino typescript plugin이 없었다. web..
🎁 Module bundler/📖 Webpack 2021. 11. 21. 17:45

CRA 없이 TS react 환경 구성

보통 cra를 이용하면 빠르게 ts 기반 react 환경을 만들 수 있습니다. npx create-react-app [원하는 이름] --template typescript 설치 및 tsconfig.json 구성 직접 webpack 부터 react 환경을 구축해나가봅시다. 우선 최소한 설치해야 할 것들입니다. Definitely Typed에서 제공하는 @types/react와 @types/react-dom을 설치해야 하는 것을 잊지 맙시다. "dependencies": { "@types/react": "^16.9.49", "@types/react-dom": "^16.9.8", "dotenv": "^8.2.0", "react": "^16.13.1", "react-dom": "^16.13.1", "typesc..
🎁 Module bundler/📖 Webpack 2020. 9. 28. 03:08

CRA 없이 webpack으로 Custom React 프로젝트 구성하기

react 생성 npm i react react-dom public/index.html ./src/index.js 에서 react-dom의 ReactDom을 통해 render를 돌려줍시다. import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { ThemeProvider } from "styled-components"; import theme from "./Style/theme"; ReactDOM.render( , document.getElementById("root") ); babel 세팅 npm i @babel/core @babel/preset-env @babel/preset-react -..
🎁 Module bundler/📖 Webpack 2020. 9. 28. 02:01

웹팩을 기초부터 하나씩 (2) : webpack.config.js

webpack.config.js는 다음과 같이 구성되어 있습니다. 하나씩 톺아봅시다. const path = require("path"); const config = { mode: "none", entry: path.resolve(__dirname, "assets", "js", "main.js"), module: { rules: [ {rule1}, {rule2}, { test: /\.(scss)$/, use: ExtractCSS.extract([ { loader: "css-loader", }, { loader: "postcss-loader", options: { plugin() { return [autoprefixer({ browsers: "cover 99.5%" })]; }, }, }, { loader..
🎁 Module bundler/📖 Webpack 2020. 7. 14. 22:49

웹팩을 기초부터 하나씩 (1) : 모듈 번들러, 간단한 번들링

전에도 언급했듯 웹팩은 모듈 번들러입니다. 모듈? 특정 기능을 하는 코드 덩어리입니다. 웹을 구성하는 HTML, CSS, JS 등이 모듈입니다. 당연히 SCSS, JSX 등 도 모듈입니다. 그런데 코드를 작성할 때 이들을 모두 한 페이지에 작성하는 것이 아니라 생산성을 위해 폴더와 파일 단위로 구분하여 작성합니다. 이 덩어리들을 한 곳에 모아 주는 것을 '모듈 번들러'라고 합니다. 왜 굳이 번들링을 해야 하는가? 분리된 파일에서 변수, 함수명이 겹쳐서 overwite되는 경우 이미지 압축, JS 트랜스파일 등 loader를 통한 자동화 Lazy Loading을 통한 로딩 시간 단축. (웹팩에서 코드 스플리팅을 할 수 있습니다) HTTP 요청 횟수를 줄이기 위함 (프론트에서 서버로 http 요청을 보내는 ..
🎁 Module bundler/📖 Webpack 2020. 7. 14. 21:44

🥤 gulp 사용하기 (5) gh pages로 deploy

https://www.npmjs.com/package/gulp-gh-pages gulp-gh-pages gulp plugin to publish contents to Github pages www.npmjs.com 너무 간단해서 적을게 없다. 주의사항은, 완성했다고 허겁지겁 배포하면 탈이 난다는 것이다. dev, build, deploy를 먼저 잘 구성하고, 실험삼아 dev를 한번 더 돌려보고, 이후에 deploy하자. import ghPages from "gulp-gh-pages"; const deployGhPages = () => gulp.src("build/**/*").pipe(ghPages()); // for build export const build = gulp.series([prepare, ..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 22:00

🥤 gulp 사용하기 (4) babelify와 Browserify의 개념과 gulp-bro를 통한 활용

babelify는 ES6 이상의 JS 문법을 트랜스파일해주는 바벨을 브라우저가 알아들을 수 있는 방식으로 바꿔주는 것이다. 간단~ 반면 browserify는 CommonJS 형태로 정의된 의존성 파일(dependencies) 들을 브라우저 내에서 사용할 수 있도록 번들링을 할 수 있게 해주는 도구이다. CommonJS 형태는 Node에서 채택한 방식이므로 위키피디아에서는 다음과 같이 설명하고 있다. Browserify is an open-source JavaScript tool that allows developers to write Node.js-style modules that compile for use in the browser. CommonJS건 AMD건 결국 모듈을 불러오고 내보내는 코드가 중..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 20:52

🥤 gulp 사용하기 (3) sass 트랜스파일 및 + Autoprefixer + minify

🥤 sass transpile https://www.npmjs.com/package/gulp-sass sass는 위 npm에서 설명한대로 코딩하면 된다. import gulp from "gulp"; import gulppug from "gulp-pug"; import del from "del"; import ws from "gulp-webserver"; import gulpimage from "gulp-image"; import sass from "gulp-sass"; sass.compiler = require("node-sass"); const routes = { scss: { watch: "src/scss/*", src: "src/scss/styles.scss", dest: "build/css", }..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 19:43

🥤 gulp 사용하기 (3) Image Optimization

gulp-image Optimize PNG, JPG, GIF, SVG images with gulp task. www.npmjs.com 공식 문서를 보면 이미지 압축에 대한 옵션이 많은 것을 볼 수 있다. 원하는 대로 설정하자. const gulp = require('gulp'); const image = require('gulp-image'); gulp.task('image', () => { gulp.src('./fixtures/*') .pipe(image({ pngquant: true, optipng: false, zopflipng: true, jpegRecompress: false, mozjpeg: true, gifsicle: true, svgo: true, concurrent: 10, quiet:..
🎁 Module bundler/🥤 Gulp 2020. 6. 19. 17:21