Open grinono opened 8 years ago
fixed it with using > babel > browserify
@grinono could you describe the full solution and how did you use asteroid?
i created a boilerplate chrome extension with : https://github.com/yeoman/generator-chrome-extension then added npm i --save browserify and added it to the gulp tasks. something like;
var browserify = require('browserify'); var source = require('vinyl-source-stream'); var watch = require('gulp-watch');
// generated on 2016-03-11 using generator-chrome-extension 0.5.4 import gulp from 'gulp'; import gulpLoadPlugins from 'gulp-load-plugins'; import del from 'del'; import runSequence from 'run-sequence'; import {stream as wiredep} from 'wiredep';
const $ = gulpLoadPlugins();
gulp.task('browserify', function() { return browserify('./dist/scripts/background.js')
.bundle()
//Pass desired output filename to vinyl-source-stream
.pipe(source('background.js'))
// Start piping stream to tasks!
.pipe(gulp.dest('./dist/scripts'));
});
gulp.task('extras', () => { return gulp.src([ 'app/.', 'app/locales/*', '!app/scripts.babel', '!app/_.json', '!app/*.html', ], { base: 'app', dot: true }).pipe(gulp.dest('dist')); });
function lint(files, options) { return () => { return gulp.src(files) .pipe($.eslint(options)) .pipe($.eslint.format()); }; }
gulp.task('lint', lint('app/scripts.babel/*/.js', { env: { es6: true } }));
gulp.task('images', () => { return gulp.src('app/images/*/') .pipe($.if($.if.isFile, $.cache($.imagemin({ progressive: true, interlaced: true, // don't remove IDs from SVGs, they are often used // as hooks for embedding and styling svgoPlugins: [{cleanupIDs: false}] })) .on('error', function (err) { console.log(err); this.end(); }))) .pipe(gulp.dest('dist/images')); });
gulp.task('html', () => { return gulp.src('app/.html') .pipe($.sourcemaps.init()) .pipe($.if('.js', $.uglify())) .pipe($.if('.css', $.minifyCss({compatibility: ''}))) .pipe($.sourcemaps.write()) .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true}))) .pipe(gulp.dest('dist')); });
gulp.task('chromeManifest', () => { return gulp.src('app/manifest.json') .pipe($.chromeManifest({ buildnumber: true, background: { target: 'scripts/background.js', exclude: [ 'scripts/chromereload.js' ] } })) .pipe($.if('.css', $.minifyCss({compatibility: ''}))) .pipe($.if('.js', $.sourcemaps.init())) .pipe($.if('.js', $.uglify())) .pipe($.if('*.js', $.sourcemaps.write('.'))) .pipe(gulp.dest('dist')); });
gulp.task('babel', () => { return gulp.src('app/scripts.babel/*/.js') .pipe($.babel({ presets: ['es2015'] })) .pipe(gulp.dest('app/scripts')); });
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('watch', ['build'], () => { // $.livereload.listen();
// gulp.watch([ // 'app/_.html', // 'app/scripts/_/.js', // 'app/images/*/', // 'app/styles/**/_', // 'app/_locales/_/.json' // ]).on('change', $.livereload.reload);
gulp.watch('app/scripts.babel/*/.js', ['build']); // gulp.watch('bower.json', ['wiredep']); });
gulp.task('size', () => { return gulp.src('dist/*/').pipe($.size({title: 'build', gzip: true})); });
gulp.task('wiredep', () => { gulp.src('app/.html') .pipe(wiredep({ ignorePath: /^(..\/)../ })) .pipe(gulp.dest('app')); });
gulp.task('package', function () { var manifest = require('./dist/manifest.json'); return gulp.src('dist/**') .pipe($.zip('werk-' + manifest.version + '.zip')) .pipe(gulp.dest('package')); });
gulp.task('build', (cb) => { runSequence( 'lint', 'babel', 'chromeManifest', ['html', 'images', 'extras',"browserify"], 'size', cb); });
gulp.task('default', ['clean'], cb => { runSequence('build', cb); });
i'm trying to work with the 2.0 version of this package from a chrome extension. But somehow it's not working. older version worked just fine.
looks like import is not accepted from within a chrome extensions. do we require ES6?
linking in the backgrouds.html to the packages is also not working:
any idea how to fix this.