การเขียนโปรแกรม browserify

17

ฉันกำลังเขียนแอพใหม่โดยใช้ES6ไวยากรณ์(JavaScript) ผ่านทbabelรานสไพเลอร์และpreset-es2015ปลั๊กอินรวมถึงsemantic-uiสไตล์ index.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from '../dist/scripts/jquery.min'; import * as jquery3 from '../node_modules/jquery/dist/jquery.min'; console.log($('my-app')); index.html <!DOCTYPE html> <html lang="fr"> <head> <body> <script src="dist/app.js"></script> </body> </html> โครงสร้างโครงการ . ├── app/ │ ├── index.js ├── assets/ ├── dist/ │ ├── scripts/ │ │ ├── …

129 javascript jquery ecmascript-6 browserify semantic-ui

2

Task Runners (Gulp, Grunt ฯลฯ ) และ Bundlers (Webpack, Browserify) ทำไมต้องใช้ร่วมกัน?

ฉันเป็นคนใหม่เล็กน้อยสำหรับโลกของนักวิ่งงานและบันเดิลเลอร์และในขณะที่ต้องผ่านสิ่งต่างๆเช่น Grunt, Gulp, Webpack, Browserify ฉันไม่รู้สึกว่ามีความแตกต่างระหว่างพวกเขามากนัก กล่าวอีกนัยหนึ่งฉันรู้สึกว่า Webpack สามารถทำทุกอย่างที่นักวิ่งงานทำ แต่ฉันยังมีตัวอย่างมากมายที่ใช้อึกและ webpack ร่วมกัน ฉันคิดไม่ออกว่าทำไม เมื่อยังใหม่กับเรื่องนี้ฉันอาจจะทำอะไรไปในทิศทางที่ไม่ถูกต้อง จะดีมากถ้าคุณสามารถชี้ให้เห็นว่าฉันขาดอะไรไป ยินดีต้อนรับลิงค์ที่เป็นประโยชน์ ขอบคุณล่วงหน้า.

117 gruntjs gulp bundler browserify webpack

3

วิธี uglify เอาต์พุตด้วย Browserify in Gulp

ฉันพยายามอัปเกรดผลลัพธ์ของ Browserify ใน Gulp แต่ไม่ได้ผล gulpfile.js var browserify = require('browserify'); var gulp = require('gulp'); var uglify = require('gulp-uglify'); var source = require('vinyl-source-stream'); gulp.task('browserify', function() { return browserify('./source/scripts/app.js') .bundle() .pipe(source('bundle.js')) .pipe(uglify()) // ??? .pipe(gulp.dest('./build/scripts')); }); ตามที่ฉันเข้าใจฉันไม่สามารถทำได้ตามขั้นตอนด้านล่างนี้ ฉันต้องทำในท่อเดียวเพื่อรักษาลำดับไว้หรือไม่? gulp.task('browserify', function() { return browserify('./source/scripts/app.js') .bundle() .pipe(source('bundle.js')) .pipe(uglify()) // ??? .pipe(gulp.dest('./source/scripts')); }); gulp.task('scripts', function() …

112 javascript node.js gulp browserify uglifyjs

11

Browserify - วิธีเรียกใช้ฟังก์ชันที่รวมอยู่ในไฟล์ที่สร้างผ่าน browserify ในเบราว์เซอร์

ฉันยังใหม่กับ nodejs และ browserify ฉันเริ่มต้นด้วยลิงค์นี้ ฉันมีไฟล์ main.js ที่มีรหัสนี้ var unique = require('uniq'); var data = [1, 2, 2, 3, 4, 5, 5, 5, 6]; this.LogData =function(){ console.log(unique(data)); }; ตอนนี้ฉันติดตั้งโมดูล uniq ด้วย npm: npm install uniq จากนั้นฉันรวมโมดูลที่ต้องการทั้งหมดโดยเริ่มจาก main.js เป็นไฟล์เดียวที่เรียกว่า bundle.js ด้วยคำสั่ง browserify: browserify main.js -o bundle.js ไฟล์ที่สร้างขึ้นมีลักษณะดังนี้: (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof …

96 node.js npm browserify

6

วิธีรับผลลัพธ์ที่ลดขนาดด้วย browserify

เพิ่งเริ่มใช้browserifyแต่ฉันไม่พบเอกสารเกี่ยวกับวิธีทำให้มันล้นออกมา ดังนั้นฉันกำลังมองหาบางอย่างเช่น: $> browserify main.js > bundle.js --minified

90 javascript node.js browserify

4

ใช้ Babel-node ในการผลิตได้หรือไม่

ฉันได้พัฒนาไซต์โดยใช้ babel-node และ browserify ด้วย babelify transform เพื่อรองรับไวยากรณ์ ES6 ฉันแค่สงสัยว่าฉันสามารถเรียกใช้สิ่งนี้ในการผลิต babel-node server แทนที่จะ เป็นnode server ตัวเลือกอื่นใดที่ฉันต้องรัน ES6 ในโหนด นี่คือคำสั่งที่ฉันกำลังเรียกใช้เพื่อสร้างและเริ่มต้นในการพัฒนา // npm run build browserify -t [babelify] client.js > public/js/bundle.js", // npm start babel-node server.js" นี่คือการพึ่งพานักพัฒนาของฉัน "babel": "^4.0.1", "babelify": "^5.0.3", "browserify": "^8.0.3"

87 javascript node.js browserify babeljs

9

browserify error / usr / bin / env: node: ไม่มีไฟล์หรือไดเร็กทอรีดังกล่าว

ฉันติดตั้งโหนด js และ npm ผ่านการติดตั้ง apt-get และการอ้างอิงทั้งหมดจากนั้นฉันติดตั้ง browserify npm install browserify -g มันต้องผ่านกระบวนการและดูเหมือนว่าจะติดตั้งอย่างถูกต้อง แต่เมื่อฉันพยายามทำบันเดิลง่ายๆตามคำแนะนำแบบนี้ ฉันได้รับข้อผิดพลาด: / usr / bin / env: node: ไม่มีไฟล์หรือไดเร็กทอรีดังกล่าว

85 javascript node.js browserify

คำถามติดแท็ก browserify