티스토리 뷰

공부합시다/Javascript

[Javascript] esbuild + browserify 사용하기

신규_유저 2022. 5. 13. 15:36

javascript에서는 require()가 되지 않는다.

만약 사용하려고 하면 "ReferenceError require is not defined" 오류가 반겨준다.

하지만 browserify를 활용하면 사용 가능!

 

참고

 

위 참고 링크덕에 만들 수 있다.

 

예시용으로 간단한 코드를 만들었다.

 

 

 

새 폴더('ex-file)를 만들고 터미널에 npm init -y 입력

package.json이 만들어졌다.

 

 

 

필요한 것을 npm  install

npm install --save ws express esbuild browserify

 

 

js파일을 모아둘 폴더 만들고 필요한 파일 작성

index.js / main.js / info.js 작성

더보기 
// index.js

const INFO = require('./info');
const Main = require('./main');
// info.js

const INFO = {
    name: 'First Name Middle Name Last Name',
    birth: '2022-05-13',
    gender: 'F'
}

module.exports = INFO;
// main.js

const INFO = require('./info');

const Main = {};
module.exports = Main;

console.log(INFO.name);

 

 

 

html 파일 만들기

src는 번들파일이 생성되면 수정할 예정이므로 대충 작성함

 

 

 

package.json 내 script 수정

더보기 
  "scripts": {
    "build": "npm run browserify",
    "browserify": "browserify src/index.js -o dist/bundle.js"
  },

 

 

 

필요하면 server.js 만들기

 

 

 

npm run build

 

 

 

html 파일 내 script src를 번들 파일로 수정

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

 

 

 

서버 실행

node server.js

 

git

반응형
LIST
저작자표시 비영리 변경금지

'공부합시다 > Javascript' 카테고리의 다른 글

[Javascript] Web Worker 사용하기  (0) 2022.06.21
[Javascript] wasm - c 함수 호출  (0) 2022.06.20
[Node.js] 서버 만들기  (0) 2022.04.16
타입 검사  (0) 2022.03.16
아스키코드를 문자열로 바꾸기(TextDecoder)  (0) 2021.12.31
댓글
링크
공지사항
최근에 올라온 글