[Pkg-javascript-commits] [pdf.js] 331/414: Initial browserify example.
David Prévot
taffit at moszumanska.debian.org
Tue Jun 28 17:12:36 UTC 2016
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository pdf.js.
commit d7d7935648c5284de0c7db48d82a769be202e1f6
Author: Yury Delendik <ydelendik at mozilla.com>
Date: Mon Apr 4 11:32:01 2016 -0500
Initial browserify example.
---
examples/browserify/.gitignore | 1 +
examples/browserify/README.md | 25 +++++++++++++++++++++++++
examples/browserify/gulpfile.js | 31 +++++++++++++++++++++++++++++++
examples/browserify/index.html | 11 +++++++++++
examples/browserify/main.js | 35 +++++++++++++++++++++++++++++++++++
examples/browserify/package.json | 16 ++++++++++++++++
examples/browserify/worker.js | 7 +++++++
make.js | 5 +++++
8 files changed, 131 insertions(+)
diff --git a/examples/browserify/.gitignore b/examples/browserify/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/examples/browserify/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/examples/browserify/README.md b/examples/browserify/README.md
new file mode 100644
index 0000000..4a6d7c2
--- /dev/null
+++ b/examples/browserify/README.md
@@ -0,0 +1,25 @@
+## Overview
+
+Example to demonstrate PDF.js library usage with browserify.
+
+## Getting started
+
+Build project and install the example dependencies:
+
+ $ gulp dist
+ $ cd examples/browserify
+ $ npm install
+
+To build browserify bundles, run `gulp build`. If you are running
+a web server, you can observe the build results at
+http://localhost:8888/examples/browserify/index.html
+
+See main.js, worker.js and gulpfile.js files. Please notice that PDF.js
+packaging requires packaging of the main application and PDF.js worker code,
+and the workerSrc path shall be set to the latter file.
+
+Alternatives to the gulp commands (without compression) are:
+
+ $ mkdir -p ../../build/browserify
+ $ node_modules/.bin/browserify main.js -o ../../build/browserify/bundle.js
+ $ node_modules/.bin/browserify worker.js -o ../../build/browserify/pdf.worker.bundle.js
diff --git a/examples/browserify/gulpfile.js b/examples/browserify/gulpfile.js
new file mode 100644
index 0000000..06a5f01
--- /dev/null
+++ b/examples/browserify/gulpfile.js
@@ -0,0 +1,31 @@
+var gulp = require('gulp');
+var browserify = require('browserify');
+var streamify = require('gulp-streamify');
+var rename = require('gulp-rename');
+var uglify = require('gulp-uglify');
+var source = require('vinyl-source-stream');
+
+var OUTPUT_PATH = '../../build/browserify';
+var TMP_FILE_PREFIX = '../../build/browserify_';
+
+gulp.task('build-bundle', function() {
+ return browserify('main.js', {output: TMP_FILE_PREFIX + 'main.tmp'})
+ .bundle()
+ .pipe(source(TMP_FILE_PREFIX + 'main.tmp'))
+ .pipe(streamify(uglify()))
+ .pipe(rename('bundle.js'))
+ .pipe(gulp.dest(OUTPUT_PATH));
+});
+
+gulp.task('build-worker', function() {
+ return browserify('worker.js', {output: TMP_FILE_PREFIX + 'worker.tmp'})
+ .bundle()
+ .pipe(source(TMP_FILE_PREFIX + 'worker.tmp'))
+ .pipe(streamify(uglify({compress:{
+ sequences: false // Chrome has issue with the generated code if true
+ }})))
+ .pipe(rename('pdf.worker.bundle.js'))
+ .pipe(gulp.dest(OUTPUT_PATH));
+});
+
+gulp.task('build', ['build-bundle', 'build-worker']);
diff --git a/examples/browserify/index.html b/examples/browserify/index.html
new file mode 100644
index 0000000..b831fe7
--- /dev/null
+++ b/examples/browserify/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>browserify example</title>
+ <script src="../../build/browserify/bundle.js"></script>
+</head>
+<body>
+ <canvas id="theCanvas"></canvas>
+</body>
+</html>
diff --git a/examples/browserify/main.js b/examples/browserify/main.js
new file mode 100644
index 0000000..59c92ff
--- /dev/null
+++ b/examples/browserify/main.js
@@ -0,0 +1,35 @@
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/licenses/publicdomain/
+
+// Hello world example for browserify.
+
+require('pdfjs-dist');
+
+var pdfPath = '../helloworld/helloworld.pdf';
+
+// Setting worker path to worker bundle
+PDFJS.workerSrc = '../../build/browserify/pdf.worker.bundle.js';
+
+// It is also possible to disable workers via `PDFJS.disableWorker = true`,
+// however that might degrade the UI performance in web browsers.
+
+// Loading a document.
+var loadingTask = PDFJS.getDocument(pdfPath);
+loadingTask.promise.then(function (pdfDocument) {
+ // Request a first page
+ return pdfDocument.getPage(1).then(function (pdfPage) {
+ // Display page on the existing canvas with 100% scale.
+ var viewport = pdfPage.getViewport(1.0);
+ var canvas = document.getElementById('theCanvas');
+ canvas.width = viewport.width;
+ canvas.height = viewport.height;
+ var ctx = canvas.getContext('2d');
+ var renderTask = pdfPage.render({
+ canvasContext: ctx,
+ viewport: viewport
+ });
+ return renderTask.promise;
+ });
+}).catch(function (reason) {
+ console.error('Error: ' + reason);
+});
diff --git a/examples/browserify/package.json b/examples/browserify/package.json
new file mode 100644
index 0000000..aaca35e
--- /dev/null
+++ b/examples/browserify/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "browserify-pdf.js-example",
+ "version": "0.1.0",
+ "devDependencies": {
+ "browserify": "^13.0.0",
+ "gulp": "^3.9.1",
+ "gulp-rename": "^1.2.2",
+ "gulp-streamify": "^1.0.2",
+ "gulp-uglify": "^1.5.3",
+ "pdfjs-dist": "../../build/dist",
+ "vinyl-source-stream": "^1.1.0"
+ },
+ "scripts": {
+ "build": "gulp build"
+ }
+}
diff --git a/examples/browserify/worker.js b/examples/browserify/worker.js
new file mode 100644
index 0000000..9745f5a
--- /dev/null
+++ b/examples/browserify/worker.js
@@ -0,0 +1,7 @@
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/licenses/publicdomain/
+
+// Hello world example for browserify: worker bundle.
+
+(typeof window !== 'undefined' ? window : {}).pdfjsDistBuildPdfWorker =
+ require('pdfjs-dist/build/pdf.worker');
diff --git a/make.js b/make.js
index b3251d7..9546925 100644
--- a/make.js
+++ b/make.js
@@ -332,6 +332,11 @@ target.dist = function() {
homepage: DIST_HOMEPAGE,
bugs: DIST_BUGS_URL,
license: DIST_LICENSE,
+ browser: { // used by browserify and ignores following files during bundle
+ 'entry?name=[hash]-worker.js!./pdf.worker.js': false,
+ './build/pdf.worker.js': false,
+ 'node-ensure': false
+ },
repository: {
type: 'git',
url: DIST_REPO_URL
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/pdf.js.git
More information about the Pkg-javascript-commits
mailing list