Compilation takes more than 15 seconds || Babel - Gulpfile - es6 - rollup bundler - javascript

I have got a very long compilation time and I try to figure it out.
The compilation have to work for the SASS and for the javascript es6 files and for the handlebars template.
There are two parts on my web application. The first one is the nodeJs server and the other part is the web application using the nodeJS server.
See there a screenshot from my console
Any thoughts on how to help me on this?
tree :
/index.js
/package.json
/gulpfile.babel.json
/public/
src/
script/*
styles/*
template/*
/dist
package.json
{
"name": "****",
"version": "0.0.0",
"description": *****",
"main": "index.js",
"author": "****",
"private": true,
"dependencies": {
"colors": "^1.1.2",
"express": "4.13.4",
"google-auth-library": "^0.10.0",
"googleapis": "^20.1.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-babel": "^7.0.0",
"handlebars": "^4.0.10",
"mongodb": "^2.2.15",
"nodemailer": "^4.0.1",
"nodemailer-mailgun-transport": "^1.3.5",
"socket.io": "^1.7.1",
"underscore": "^1.8.3",
"uuid": "^3.0.1"
},
"scripts": {
"start": "node index.js"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.22.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-register": "^6.22.0",
"backbone": "^1.3.3",
"backbone-associate": "0.0.13",
"backbone.localstorage": "^1.1.16",
"backbone.marionette": "^3.2.0",
"browser-sync": "^2.18.13",
"gsap": "^1.19.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-declare": "^0.3.0",
"gulp-define-module": "^0.1.5",
"gulp-file": "^0.3.0",
"gulp-filter": "^5.0.0",
"gulp-handlebars": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.1",
"gulp-sourcemaps": "^2.4.0",
"gulp-uglify": "^2.0.1",
"gulp-wrap": "^0.13.0",
"handlebars": "^4.0.10",
"jquery": "^3.1.1",
"merge-stream": "^1.0.1",
"rollup": "^0.41.4",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-json": "^2.1.0",
"rollup-plugin-node-builtins": "^2.0.0",
"rollup-plugin-node-resolve": "^2.0.0",
"run-sequence": "^1.2.2"
},
"babel": {
"presets": [
"es2015"
]
}
}
gulfile.babel.js :
import gulp from 'gulp';
import sass from 'gulp-ruby-sass';
import { rollup } from 'rollup';
import json from 'rollup-plugin-json';
import plumber from 'gulp-plumber';
import file from 'gulp-file';
import filter from 'gulp-filter';
import rename from 'gulp-rename';
import sourcemaps from 'gulp-sourcemaps';
import runSequence from 'run-sequence';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import handlebars from 'gulp-handlebars';
import wrap from 'gulp-wrap';
import declare from 'gulp-declare';
import merge from 'merge-stream';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import defineModule from 'gulp-define-module';
import browserSync from 'browser-sync';
import {name} from './package.json';
const srcPath = 'public/src/';
function bundle(opts) { // very long ... (12s)
return rollup({
entry: srcPath + "scripts/" + name + '.js',
plugins: [
json(),
builtins(),
nodeResolve(),
commonjs(),
babel({
// sourceMaps: true,
presets: [['es2015', {modules: false}]],
babelrc: false
})
]
}).then(bundle => {
return _generate(bundle);
}).then(gen => {
gen.code += '\n//# sourceMappingURL=' + gen.map.toUrl();
return gen;
});
}
function _generate(bundle) { // long too (4s)
return bundle.generate({
format: 'iife',
moduleName: 'ATalks',
sourceMap: true
});
}
function compileScripts(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
.pipe(filter(['**', '!**/*.js.map']))
.pipe(rename(name + '.min.js'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath));
});
}
function compileScriptsLight(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
});
}
gulp.task('sass', function () {
return sass(srcPath+'styles/all.scss')
.on('error', sass.logError)
.pipe(gulp.dest('public/dist/styles'))
.pipe(plumber())
.pipe(browserSync.stream());
});
gulp.task('scripts', function(done) {
return compileScripts('public/dist/');
});
gulp.task('scriptsLight', function(done) {
return compileScriptsLight('public/dist/');
});
gulp.task('templates', function(done){
gulp.src(['public/src/templates/*.hbs'])
.pipe(handlebars({
handlebars: require('handlebars')
}))
.pipe(defineModule('es6', {
require: {
Handlebars: "handlebars/runtime"
}
}))
.pipe(gulp.dest('public/src/templates'));
runSequence('scripts', done);
});
gulp.task('move', function() {
gulp.src([srcPath+"*.html", srcPath+"images/**", srcPath+"fonts/**"], {base: srcPath }).pipe(gulp.dest("public/dist/"));
});
gulp.task('default', function() {
browserSync.init(null, {
proxy: "http://localhost:3000",
files: ["public/dist/**/*.*"],
port: 7000
});
gulp.watch(srcPath+'/**/*.js',['scriptsLight']);
gulp.watch(srcPath+'/**/*.hbs',['templates']);
gulp.watch(srcPath+'/**/*.scss',['sass']);
gulp.watch(srcPath+'*.html',['move']);
gulp.watch(srcPath+'/images/**',['move']);
gulp.watch(srcPath+'/fonts/**',['move']);
});
gulp.task('build', ['templates', 'scripts', 'sass', 'move']);
.babelrc :
{
"presets": ["es2015"]
}

Related

Callback of onMounted is not being triggered in vue 3 plugin that bundled by webpack

Forgive me for getting long content to explain my problem.
I made a simple npm vue3-helloword-webpack plugin. This plugin consoles the simple text from inside the onMounted method.
If I bundle this helloworld plugin using vue-cli tool, the callback of onMounted from plugin would be triggered. But same does not happen while bundling by webpack.
I think the problem is occurred because of currenIntance(I guess it’s a vue instance) is null as shown in below image.
Content: when the plugin is bundled by webpack
Webpack.config.babel.js
const TerserPlugin = require("terser-webpack-plugin")
const libraryNamePlugin = 'vue3-helloworld-webpack';
const appConfig = {
entry: {
'vue3-helloworld-webpack': __dirname + '/src/index.js',
'vue3-helloworld-webpack.min': __dirname + '/src/index.js'
},
devtool: 'source-map',
output: {
path: __dirname + '/dist',
filename: '[name].js',
library: libraryNamePlugin,
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /(\.jsx|\.js)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
include: 'vue3-helloworld-webpack.min.js',
}),
],
},
};
module.exports = [appConfig];
package.json
....
"main": "dist/vue3-helloworld-webpack.js",
"scripts": {
"build": "webpack --config webpack.config.babel.js"
},
"dependencies": {
"core-js": "^3.6.5"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/register": "^7.13.16",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-add-module-exports": "^1.0.4",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.3.4",
"eslint": "^7.27.0",
"eslint-loader": "^4.0.2",
"lodash": "^4.17.21",
"mocha": "^8.4.0",
"terser-webpack-plugin": "^5.1.3",
"vue": "^3.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2",
"yards": "^0.1.4"
}
....
vue3-helloworld-webpack.js
import {onMounted, h} from 'vue'
const config = { msg: String }
export default {
name: 'vue3-helloworld-webpack',
props : config,
setup(props) {
console.log("setup() is invoked")
console.log(props.msg);
onMounted(function () {
console.log("Hooray!!! Onmounted() is triggered")
});
},
render() {
return h('div', {
id: 'helloworld-1'
});
}
}
src/index.js
import vue3helloworldwebpack from './vue3-helloworld-vuewebpack';
const install = (app) => {
app.component(vue3helloworldwebpack.name, vue3helloworldwebpack);
};
export default install;
Result: when the plugin is used by other very simple vue app
Content when the plugin bundled by Vue-cli
package.json
....
"main": "dist/vue3-helloworld-vuecli.umd.js",
"scripts": {
"build": "vue-cli-service build --formats umd --target lib ./src/index.js"
},
"dependencies": {
"core-js": "^3.6.5"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.6",
"#vue/cli-plugin-eslint": "^4.5.6",
"#vue/cli-plugin-unit-jest": "^4.5.6",
"#vue/cli-service": "^4.5.6",
"#vue/compiler-sfc": "^3.0.0-rc.10",
"#vue/test-utils": "^2.0.0-beta.5",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.3.0",
"eslint": "^7.9.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.0-0",
"husky": "^6.0.0",
"prettier": "^2.1.1",
"typescript": "^4.0.2",
"vue": "^3.0.0",
"vue-jest": "^5.0.0-alpha.4"
}
....
Other codes are similar to webpack version except name and webpack config file.
Result
The other simple vue3 app which is using the created plugin(vue3-helloworld-webpack)
Main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3HelloworldWebpack from 'vue3-helloworld-webpack'
createApp(App).use(Vue3HelloworldWebpack).mount('#app')
App.vue
<template> <vue3-helloworld-webpack msg="Welcome!!!!" /></template>
We can get created plugins: webpack and vue-cli versions on GitHub.
My question
Vue cli version does work. One interesting thing, the same webpack file configuration is working for vue2 plugin also.
But it does not work for vue 3 plugin, How can I do this without using vue-cli but using webpack version ?

Unhandled promise rejection SyntaxError: Expected ':' getting this on IE11 with vuejs+ vuetify project

I have a project in vuejs + vuetify, the project is running fine on chrome browser but when I run the project on Internet Explorer 11 It only shows me the session pages and when i hit the login button it gives me this error
Unhandled promise rejection SyntaxError: Expected ':'
in console and I have to hit the login button twice to enter the app. Here I do not see the main content of page, only sidebar menu gets displayed and the main content is not renderd and I again get an error in my console which is
Unhandled promise rejection NavigationDuplicated: Navigating to
current location(/dashboard/home/something) is not allowed
This is my package.json
"dependencies": {
"#types/leaflet": "^1.5.1",
"algoliasearch": "^3.33.0",
"amcharts3": "^3.21.14",
"auth0-js": "^9.11.3",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.8.0",
"echarts": "^4.2.1",
"firebase": "^6.4.2",
"instantsearch.css": "^7.3.1",
"jquery": "^3.4.1",
"leaflet": "^1.4.0",
"moment": "^2.22.2",
"nprogress": "^0.2.0",
"screenfull": "^4.2.1",
"slick-carousel": "^1.8.1",
"velocity-animate": "^1.5.2",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-count-to": "^1.0.13",
"vue-croppa": "^1.3.8",
"vue-draggable-resizable": "^2.0.0-rc1",
"vue-echarts": "^4.0.3",
"vue-fullcalendar": "^1.0.9",
"vue-fullscreen": "^2.1.5",
"vue-i18n": "^8.14.0",
"vue-instantsearch": "^2.3.0",
"vue-loading-spinner": "^1.0.11",
"vue-notification": "^1.3.16",
"vue-perfect-scrollbar": "^0.2.0",
"vue-quill-editor": "^3.0.6",
"vue-radial-progress": "^0.2.10",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.2",
"vue-slick": "^1.1.15",
"vue-star-rating": "^1.6.1",
"vue-tour": "^1.1.0",
"vue-video-player": "^5.0.2",
"vue-wysiwyg": "^1.7.2",
"vue2-breadcrumbs": "^2.0.0",
"vue2-dragula": "^2.5.4",
"vue2-dropzone": "^3.6.0",
"vue2-google-maps": "^0.10.7",
"vue2-leaflet": "^2.2.1",
"vuedraggable": "^2.20.0",
"vuetify": "^2.0.11",
"vuex": "^3.0.1",
"weather-icons": "^1.3.2",
"webpack": "^4.39.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"deepmerge": "^4.0.0",
"fibers": "^4.0.1",
"sass": "^1.22.10",
"sass-loader": "^7.3.1",
"vue-template-compiler": "^2.6.10"
}
This is how I am importing babel-polyfill in my main.js
import 'babel-polyfill';
import Vue from 'vue'
import vuetify from '#/plugins/vuetify'
import * as VueGoogleMaps from 'vue2-google-maps'
import { Vue2Dragula } from 'vue2-dragula'
import VueQuillEditor from 'vue-quill-editor'
import wysiwyg from 'vue-wysiwyg'
import VueBreadcrumbs from 'vue2-breadcrumbs'
babel.config.js
module.exports = {
presets: [
["#vue/app", {
modules: "commonjs"
}]
]
}
vue.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
publicPath: process.env.NODE_ENV == 'production' ? '/' : '/',
css: {
sourceMap: true
},
productionSourceMap: false,
transpileDependencies: [
/\/node_modules\/vuetify\//,
/\/node_modules\/vue-echarts\//,
/\/node_modules\/resize-detector\//
],
configureWebpack: {
resolve: {
alias: {
Api: path.resolve(__dirname, 'src/api/'),
Components: path.resolve(__dirname, 'src/components/'),
Constants: path.resolve(__dirname, 'src/constants/'),
Container: path.resolve(__dirname, 'src/container/'),
Views: path.resolve(__dirname, 'src/views/'),
Helpers: path.resolve(__dirname, 'src/helpers/'),
Themes: path.resolve(__dirname, 'src/themes/')
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
//jquery plugin
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
]
}
}
I solved this issue by downgrading the version of vue2-dropzone, its latest version has some issues with IE11 and pass "vue2-dropzone" inside the transpileDependencies of your webpack file.

published npm package es6 import does not work

I have trouble in creating a npm module that I can use via es6 imports inside other modules.
I have a folder "1" where I bundle up a simple js class file with the help of gulp:
/1/script.js
export default class npmtest1
{
static capitalize(string)
{
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
/1/package.json
{
"name": "npmtest1",
"version": "1.0.0",
"main": "script.min.js",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/1/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
Then I publish this module via "npm publish".
In another folder "2" I have a quite similiar setup:
/2/script.js
import npmtest1 from 'npmtest1';
alert(npmtest1.capitalize('foo'));
/2/package.json
{
"dependencies": {
"npmtest1": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.1",
"gulp": "^3.9.1",
"gulp-connect": "^5.0.0",
"gulp-uglify": "^3.0.0",
"uglify": "^0.1.5",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^2.0.0"
}
}
/2/gulpfile.js
var gulp = require('gulp'),
babelify = require('babelify'),
buffer = require('vinyl-buffer'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify');
gulp.task('js', function()
{
return browserify({
entries: ['./script.js']
})
.transform(babelify.configure({
presets : ['es2015', 'es2017'],
plugins : ['transform-runtime']
}))
.bundle()
.on('error', function(err) { console.log(err.toString()); this.emit('end'); })
.pipe(source('script.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['js']);
When I embed script.min.js inside a html file, I get the following error:
Uncaught TypeError: i.default.capitalize is not a function
Am I missing something? This is a very basic task.
Ok, bad mistake: I tried to import a module bundled with browserify/babelify.
Instead I had to use gulp-babel to convert all js files to es2015.

ReferencerError: Define is not defined - Browserify

I'm developing a site on React, and I'm trying to generate the bundle with browserify throuhg gulp
This is my gulpfile:
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var babel = require('babelify');
var gulp = require('gulp');
var util = require("gulp-util");
var log = util.log;
var path = require('path');
function compile(watch) {
var bundler = watchify(browserify('./app.js', { debug: true }));
function rebundle() {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/js'));
}
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
}
function watch() {
return compile(true);
}
gulp.task('build', function() { return compile(); });
gulp.task('watch', ['sass:watch'], function() { return watch(); });
gulp.task('default', ['watch']);
It correclty runs the build, and generates the bundle. But after that, when I import to the site I get the error:
ReferenceError: define is not defined
I guess browserify, or the bundle generated is expecting some other package that has the define? What I'm missing?
Here is my package.json:
{
"name": "react-test",
"version": "0.0.1",
"license": "",
"browserify": {
"transform": [
"babelify"
]
},
"dependencies": {
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.4.0",
"redux": "^3.3.1",
"redux-happy-async": "0.0.4",
"redux-thunk": "^1.0.3",
"rest": "^1.3.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.5.1",
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"babelify": "^6.1.2",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.1",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"karma": "^0.13.21",
"karma-jasmine": "^0.3.7",
"karma-phantomjs-launcher": "^1.0.0",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.4",
"reactify": "^1.1.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"webpack": "^1.12.2",
"webpack-stream": "^3.1.0"
}
}

bundle.js not found (**not webpack related)

I keep getting a 404 error on my bundle.js file. I have been googling, reading, and trying everything I can for hours to figure it out, but I haven't found a solution to help me. I get the following error in my browser (Chrome)
"Failed to load resource: the server responded with a status of 404
http://localhost:3000/bundle.js (NOT FOUND)"
Here is my gulpfile.babel.js:
import gulp from 'gulp';
import babelify from 'babelify';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import browserSync from 'browser-sync';
import less from 'gulp-less';
import ghPages from 'gh-pages';
import gutil from 'gulp-util';
import fs from 'fs';
const sync = browserSync.create();
gulp.task('html', () => {
gulp.src('src/**/*.html')
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
gulp.task('json', () => {
gulp.src('src/**/*.json')
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
gulp.task('script', () => {
browserify().transform(babelify.configure({
presets: ["es2015", "react"] }))
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
});
gulp.task('styles', ['fonts'], () => {
gulp.src('src/styles/**/*.{css,less}')
.pipe(less()
.on('error', (error) => {
gutil.log(gutil.colors.red('Error: ' + error.message));
gutil.beep();
}))
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
// Fonts
gulp.task('fonts', () => {
gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('dist/fonts/'));
});
gulp.task('build', ['html', 'script', 'styles', 'json']);
gulp.task("deploy", ["build"], () => {
ghPages.publish("dist");
});
gulp.task('serve', ['build'], () => {
sync.init({
server: 'dist',
});
gulp.watch('src/**/*.html', ['html']);
gulp.watch('src/**/*.json', ['json']);
gulp.watch('src/**/*.{css,less}', ['styles']);
gulp.watch('src/**/*.{js,jsx}', ['script'])
});
gulp.task('default', ['serve']);
My package.json
{
"private": true,
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babelify": "^7.2.0",
"browser-sync": "^2.10.1",
"browserify": "^12.0.1",
"fs": "0.0.2",
"gh-pages": "^0.8.0",
"gulp": "^3.9.0",
"gulp-less": "^3.0.5",
"gulp-util": "^3.0.7",
"react": "^0.14.3",
"vinyl-source-stream": "^1.1.0",
"webpack": "^1.12.9"
},
"dependencies": {
"backbone": "^1.2.3",
"bootstrap": "^3.3.6",
"font-awesome": "^4.5.0",
"jquery": "^2.1.4",
"parse": "^1.6.13",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"underscore": "^1.8.3"
}
}
My index.html has the following at the bottom of the body:
<script type="text/javascript" src="bundle.js"></script>
Also, I have a .babelrc set up with the es2015 and react presets
Thanks in advance for any feedback!
UPDATE SOLVED:
gulp.task('script', () => {
browserify().transform(babelify.configure({
presets: ["es2015", "react"] }))
.bundle()
.pipe(fs.createWriteStream("dist/bundle.js"))
});
Had to add - dist/ - to the last line
Do you have multiple web servers running? For instance on port 3000 and port 80? And if so, is bundle.js placed in the correct web folder?
Could a .htaccess file or similar be blocking access to bundle.js?
If you create a random file (test.html), can you then access it from http://localhost:3000/test.html?

Categories