Hirdetés

Új hozzászólás Aktív témák

  • Jim-Y
    veterán

    Hali!

    Szükségem lenne egy kis segítségre, mert már kezdek belekavarodni az egészbe Babel 6-ba. :)
    Egyik kedvenc fícsöröm nekem ez a modulokra bontás, de most ez az egész meg lett kavarva a 6-os verzióban, és nem tudom mi tévő legyek.

    Felraktam a SystemJS plugint, és írtam egy pofon egyszerű kódot:
    module.js:
    export var lel = 42;
    app.js:
    import {num} from './module.js';
    console.log(num);

    Aztán a böngésző ezt írja: Uncaught ReferenceError: System is not defined

    Kis olvasgatás után rájöttem, hogy hohó, ezt bizony össze is kellene csomagolni, mert én naív azt hittem ez a háttérben megtörténik, ezért leszedtem a browserifyt, babelifyt, majd írtam egy gulp fájlt rá.

    var gulp = require('gulp');
    var browserify = require('browserify');
    var babelify = require('babelify');
    var source = require('vinyl-source-stream');

    gulp.task('build', function () {
    return browserify({entries: 'src/app.js', extensions: ['.js'], debug: true})
    .transform('babelify', {
    presets: ['es2015'],
    plugins: ['transform-es2015-modules-systemjs']
    })
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist'));
    });

    gulp.task('q', function () {
    gulp.watch('src/app.js', ['build']);
    });

    A probléma viszont még mindig jelen van, és nem tudom mit hagyhattam ki. Esetleg valaki tud ebben segíteni? :))

    Üdv,

    Szerintem browserify nem kell mert a systemjs azt production módban megoldja. Nem vagyok nagy szakija ennek a systemjs-nek, de itt nem arról van szó, hogy development "módban" olyan mint a RequireJS (AMD) tehát nem kell bundling, production-ben pedig olyan mint egy browserify/webpack. Persze ha node-os packagek kellenek ahhoz kell bundling.

    Na, lényeg a lényeg ott van a hiba hogy a num nevű változót próbálod behívni a modulból holott lel-ként exportáltad. Különbség van az "export default" és az export között. Példa program

    <!doctype html>

    <html lang="en">
    <head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>

    <body>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app/app.js')
    </script>
    </body>
    </html>

    app.js

    import nameItAsYouLike from './module';
    import { otherStuff } from './module2';
    console.log(nameItAsYouLike);
    console.log(otherStuff);

    module.js

    const stuff = 42;
    export default stuff;

    module2.js

    export const otherStuff = 43;

    üdv

Új hozzászólás Aktív témák