다운로드

성장 - 브라우저 측이 필요합니다()

Browserify는 모든 종속성을 묶어 브라우저에서('modules')를 요구합니다. Node.js와 같은 모듈 시스템을 사용하므로 브라우저에서 npm 모듈을 사용하고 CommonJS 모듈을 구성할 수 있습니다.

To 모든 명령 복사 < PDF 생성

본문 바로가기

• 설치
• 시작
• 기본 사용
• 본선 인터페이스
• 프로그램 API
• 번역
• 펄진
• 출처지도
• 외부 의존
• 다중 번들
• 개발사업
• 생산
• 테스트
• 고급 기능
• 기능 최적화
• 디버깅
• 관련
• 모범 사례

설치하기

글로벌 설치

카지노사이트

로컬 설치 (추천)

카지노사이트

프로젝트 설정

카지노사이트

Package.json 스크립트

카지노사이트

시작하기

기본 모듈 구조

카지노사이트

카지노사이트

Main Entry 포인트

카지노사이트

HTML 통합

카지노사이트

기본 사용

간단한 번들 생성

카지노사이트

Transforms 사용

카지노사이트

시계 형태

ο 회원 관리

명령 선 공용영역

기본 명령

카지노사이트

고급 옵션

카지노사이트

Transform 옵션

카지노사이트

플러그인 옵션

카지노사이트

프로그래밍 API

기본 API 제품 정보

카지노사이트

고급 API 구성

카지노사이트

Stream 처리

카지노사이트

연락처

Babel 변환

카지노사이트

오프화이트

카지노사이트

CoffeeScript 변환

오프화이트

카지노사이트

카지노사이트

TypeScript 변환

카지노사이트

카지노사이트

카지노사이트

사이트맵 연락처

카지노사이트

javascript // Using browserify-css const css = require('./styles.css'); document.head.appendChild(css);의 경우

```bash

Bundle with CSS

browserify src/js/main.js -t browserify-css -o dist/bundle.js ```에 대하여

환경 변수

```bash

Install envify

npm install --save-dev envify ```의 경우

```javascript // src/js/config.js const config = { apiUrl: process.env.API_URL || 'http://localhost:3000', debug: process.env.NODE_ENV === 'development', version: process.env.npm_package_version };

module.exports = config; ```에 대하여

```bash

Bundle with environment variables

API_URL=https://api.example.com browserify src/js/main.js -t envify -o dist/bundle.js ```의 경우

플러그인

Factor Bundle 플러그인

카지노사이트

카지노사이트

회사 소개

카지노사이트

카지노사이트

사이트 맵

카지노사이트

카지노사이트

디스크 플러그인 (Bundle Analysis)

```bash

Install disc

npm install --save-dev disc ```의 경우

```javascript // Analyze bundle size const browserify = require('browserify'); const disc = require('disc');

const b = browserify('src/js/main.js'); b.plugin(disc, { output: 'bundle-analysis.html', open: true }); b.bundle().pipe(process.stdout); ```의 경우

소스 맵

Enabling 소스 맵

카지노사이트

Programmatic 소스 맵

```javascript const browserify = require('browserify'); const exorcist = require('exorcist');

// External source maps browserify('src/js/main.js', { debug: true }) .bundle() .pipe(exorcist('dist/bundle.js.map')) .pipe(fs.createWriteStream('dist/bundle.js')); ```의 경우

소스 맵 옵션

```javascript const b = browserify({ entries: ['src/js/main.js'], debug: true,

// Source map options sourceMaps: true, sourceMapPrefix: '/src', sourceRoot: '/src' }); ```를 호출합니다.

Inline 소스 맵

```javascript // Inline source maps for development const b = browserify({ entries: ['src/js/main.js'], debug: true });

// Transform with source maps b.transform('babelify', { sourceMaps: 'inline' }); ```의 경우

외부 Dependencies

공급 업체 지원하다

```bash

Create vendor bundle with common libraries

browserify -r jquery -r lodash -r moment -o dist/vendor.js

Create app bundle excluding vendor libraries

browserify src/js/main.js -x jquery -x lodash -x moment -o dist/app.js ```로

Programmatic 외부 종점

카지노사이트

HTML 통합

오프화이트

동적인 외부

카지노사이트

다수 뭉치

Factor Bundle 설정

__CODE_BLOCK_49_로그

페이지 별 기타 제품

카지노사이트

```javascript // src/js/pages/about.js const common = require('../common');

// About page specific code const aboutController = { init() { console.log('About page initialized'); },

setupTeamGrid() { // About page team grid logic } };

aboutController.init(); module.exports = aboutController; ```를 호출합니다.

여러 번들을 위한 스크립트 구축

```javascript // build-all.js const browserify = require('browserify'); const fs = require('fs'); const path = require('path');

const pages = ['home', 'about', 'contact', 'products'];

// Build individual page bundles pages.forEach(page => { const b = browserify(src/js/pages/${page}.js);

// Add common externals b.external('jquery'); b.external('lodash');

b.bundle() .pipe(fs.createWriteStream(dist/${page}.js)) .on('finish', () => { console.log(${page}.js bundle created); }); });

// Build vendor bundle const vendor = browserify(); vendor.require('jquery'); vendor.require('lodash');

vendor.bundle() .pipe(fs.createWriteStream('dist/vendor.js')) .on('finish', () => { console.log('vendor.js bundle created'); }); ```의 경우

개발 Workflow

개발 서버

카지노사이트

카지노사이트

실시간 Reload 설정

```javascript // dev-server.js const budo = require('budo'); const babelify = require('babelify');

budo('src/js/main.js:bundle.js', { live: true, open: true, port: 3000, stream: process.stdout,

// Browserify options browserify: { transform: [ babelify.configure({ presets: ['@babel/preset-env'] }) ], debug: true } }).on('connect', (ev) => { console.log('Server running on %s', ev.uri); }); ```로

핫 모듈 교체

카지노사이트

카지노사이트

개발 빌드 Script

카지노사이트

회사연혁

이름 *

```bash

Install uglifyify

npm install --save-dev uglifyify ```에

```bash

Production build with minification

NODE_ENV=production browserify src/js/main.js -t babelify -g uglifyify -o dist/bundle.min.js ```의 경우

생산 빌드 Script

카지노사이트

번들 분석

카지노사이트

Gzip 분석

```javascript // gzip-analysis.js const browserify = require('browserify'); const zlib = require('zlib');

browserify('src/js/main.js') .bundle((err, buf) => { if (err) throw err;

const size = buf.length;

zlib.gzip(buf, (err, gzipped) => {
  if (err) throw err;

  const gzipSize = gzipped.length;

  console.log('Bundle size:', (size / 1024).toFixed(2) + 'KB');
  console.log('Gzipped size:', (gzipSize / 1024).toFixed(2) + 'KB');
  console.log('Compression ratio:', ((1 - gzipSize / size) * 100).toFixed(1) + '%');
});

}); ```의 경우

제품정보

Tape를 사용한 Unit 테스트

카지노사이트

카지노사이트

카지노사이트

관련 기사

카지노사이트

카지노사이트

Karma 통합

카지노사이트

```javascript // karma.conf.js module.exports = function(config) { config.set({ frameworks: ['jasmine', 'browserify'],

files: [
  'test/**/*.js'
],

preprocessors: {
  'test/**/*.js': ['browserify']
},

browserify: {
  debug: true,
  transform: ['babelify']
},

browsers: ['Chrome'],

singleRun: true

}); }; ```의 경우

Mocking 과 Stubbing

카지노사이트

고급 기능

사용자 정의 Transforms

```javascript // transforms/custom-transform.js const through = require('through2'); const path = require('path');

module.exports = function(file, opts) { // Only process .custom files if (path.extname(file) !== '.custom') { return through(); }

let content = '';

return through( function(chunk, enc, callback) { content += chunk.toString(); callback(); }, function(callback) { // Transform the content const transformed = content .replace(/CUSTOM_SYNTAX/g, 'JavaScript equivalent') .replace(/${([^}]+)}/g, '" + $1 + "');

  this.push('module.exports = ' + JSON.stringify(transformed));
  callback();
}

); }; ```의 경우

플러그인 개발

카지노사이트

상태 Bundling

```javascript // conditional-build.js const browserify = require('browserify');

const isProduction = process.env.NODE_ENV === 'production'; const isDevelopment = !isProduction;

const b = browserify({ entries: ['src/js/main.js'], debug: isDevelopment });

// Conditional transforms if (isDevelopment) { b.transform('browserify-hmr'); } else { b.transform('uglifyify', { global: true }); }

// Conditional plugins if (isProduction) { b.plugin('bundle-collapser/plugin'); }

b.bundle().pipe(fs.createWriteStream( isProduction ? 'dist/bundle.min.js' : 'dist/bundle.js' )); ```로

동적 수입

카지노사이트

성능 최적화

번들 분할

카지노사이트

Lazy 선적

카지노사이트

Code Splitting 와 인자 번들

카지노사이트

번들 크기 최적화

오프화이트

관련 링크

Debug 모드

ο 회원 관리

소스 맵 Debugging

javascript // Enable source maps in development const b = browserify({ entries: ['src/js/main.js'], debug: true, // Enables inline source maps fullPaths: true // Keep full paths for better debugging });에 대하여

번들 분석

__CODE_BLOCK_82_를

오류 처리

카지노사이트

교육과정

```javascript // profile-build.js const browserify = require('browserify');

console.time('Bundle time');

browserify('src/js/main.js') .bundle() .pipe(fs.createWriteStream('dist/bundle.js')) .on('finish', () => { console.timeEnd('Bundle time');

// Memory usage
const used = process.memoryUsage();
console.log('Memory usage:');
for (let key in used) {
  console.log(`${key}: ${Math.round(used[key] / 1024 / 1024 * 100) / 100} MB`);
}

}); ```에

관련 기사

Webpack에서

__CODE_BLOCK_85_로그인

RequireJS에서

카지노사이트

Migration 체크리스트

• CommonJS에 AMD/RequireJS 모듈을 변환
• 공급 업체 라이브러리의 npm 상응
• Browserify를 사용하여 빌드 스크립트를 업데이트
• 사전 처리에 대한 변환
• watchify로 개발 작업 흐름 설정
• 번들 스크립트를 사용하는 HTML 업데이트
• 마이그레이션 후 모든 기능을 테스트

최고의 연습

모듈 조직

카지노사이트

의존성 관리

json // package.json - Clear separation of dependencies { "dependencies": { "jquery": "^3.6.0", "lodash": "^4.17.21" }, "devDependencies": { "browserify": "^17.0.0", "babelify": "^10.0.0", "watchify": "^4.0.0" } }에

구성

오프화이트

성과 모범 사례

• **외부 번들 사용 ** 대형 라이브러리
• ** 큰 응용 프로그램에 대한Implement 코드 분할 **
• Enable source maps 개발 중
• ** 악의적으로 변환 ** - 그들은 빌드 시간을 추가
• **당신의 빌드를 프로파일 ** Bottlenecks를 식별

개발 모범 사례

• ** 개발 중에 빠른 재건을 위해 watchify**를 사용하십시오.
• ** budo 또는 유사한 도구로 라이브 재로드 ** 설정
• **확실한 오류 처리 ** 빌드 스크립트
• ** 디버그 모드 사용 ** 더 나은 디버깅 경험
• **Keep은 일관성을 위해 package.json**에서 변환합니다.

생산 모범 사례

• ** 묶음** uglify로
• **Remove debug 코드 ** envify
• **Analyze 번들 크기 ** 정기적으로
• ** 서버에서 gzip 압축** 사용
• ** 정확한 캐싱 ** 헤더

---

제품정보

Browserify는 Node.js-style 모듈 시스템을 브라우저에 가져오는 강력한 도구입니다. 주요 특징은 다음을 포함합니다:

• ** CommonJS Modules**: 사용 필요() 및 모듈. 브라우저의 수출
• **NPM 통합 **: npm 생태계 전체 활용
• 변환 시스템: Babel, TypeScript, CoffeeScript 등 전처리 파일
• ** 플러그인 **: 플러그인으로 기능 확장
• 소스 지도: 브라우저의 원래 소스 코드를 디버그
• Code Splitting: 더 나은 성능을 위한 여러 번들을 만듭니다.
• 개발 도구: 모드, 라이브 리로드 및 디버깅 지원
• Production Ready: 분화, 최적화 및 번들 분석

Browserify를 사용하여 Node.js에서 사용되는 동일한 모듈 패턴과 같은 프론트엔드 코드를 구성할 수 있습니다. 코드를 유지하고 프론트엔드와 백엔드 사이에 코드를 공유할 수 있습니다.

<문서> 기능 copyToClipboard () 이름 * const 명령어 = document.querySelectorAll('code'); let allCommands = ''; 명령. forEach(cmd =>의 경우 모든Commands +=cmd.textContent + navigator.clipboard.write텍스(allCommands); alert('모든 명령은 클립보드에 복사!'); 이름 *

함수 생성PDF() { 창. 인쇄 (); 이름 *