plugin-babel does not work as described in documentation

SerkanSipahi commented 7 years ago

@guybedford : After a long time i have a project where im using "only" systemjs with plugin-babel. The problem is that Systemjs cant initialize the plugin files. I get always an error 404. Its try to load from wrong location:

wrong !

GET http://localhost:3000/babel-runtime/core-js/get-iterator.js 404 (Not Found)
GET http://localhost:3000/babel-plugin-syntax-class-properties.js 404 (Not Found)
GET http://localhost:3000/babel-helper-function-name.js 404  (Not Found)
GET http://localhost:3000/babel-plugin-syntax-decorators.js 404 (Not Found)
GET http://localhost:3000/babel-plugin-syntax-function-bind.js 404 (Not Found)

correct would be (starting with node_modules):

GET http://localhost:3000/node_modules/babel-runtime/core-js/get-iterator.js
GET http://localhost:3000/node_modules/babel-plugin-syntax-class-properties.js 
...
...

What im doing wrong?

Info

Mac OS X El Capitan
Chrome v51
Systemjs v0.19.36
plugin-babel v0.0.13

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="./node_modules/systemjs/dist/system.src.js"></script>
</head>
<body>
<script>
    System.config({
        defaultJSExtensions: true,
        map: {
             // internal libs
            'app/bootstrap': './app/bootstrap.js',
            "app-decorators": "./node_modules/app-decorators/src/app-decorators.js",

             // systemjs and plugin-babel
            'plugin-babel': './node_modules/systemjs-plugin-babel/plugin-babel.js',
            'systemjs-babel-build': './node_modules/systemjs-plugin-babel/systemjs-babel-browser.js',

            // babel plugins
            'babel-plugin-transform-class-properties': './node_modules/babel-plugin-transform-class-properties/lib/index.js',
            'babel-plugin-transform-decorators-legacy': './node_modules/babel-plugin-transform-decorators-legacy/lib/index.js',
            'babel-plugin-transform-function-bind': './node_modules/babel-plugin-transform-function-bind/lib/index.js',

        },
        meta: {
            '*.js': {
                // Custom Presets and Transforms
                babelOptions: {
                    stage1: true,
                    plugins: [
                        'babel-plugin-transform-class-properties',
                        'babel-plugin-transform-decorators-legacy',
                        'babel-plugin-transform-function-bind',
                    ],
                },
            },
        },
        transpiler: 'plugin-babel',
    });

    System.import('app/bootstrap');

</script>
</body>
</html>

guybedford commented 7 years ago

If just using systemjs, you probably want to make a build of the Babel plugin using either jspm build static, browserify or webpack in order for systemjs to be able to know how to load it. Let me know if that helps. On Sun, 14 Aug 2016 at 18:28, Bitcollage notifications@github.com wrote:

@guybedford https://github.com/guybedford : After a long time i have a project where im using "only" systemjs with plugin-babel. The problem is that Systemjs cant initialize the plugin files. I get always an error 404. Its try to load from wrong location:

wrong !

GET http://localhost:3000/babel-runtime/core-js/get-iterator.js 404 (Not Found) GET http://localhost:3000/babel-plugin-syntax-class-properties.js 404 (Not Found) GET http://localhost:3000/babel-helper-function-name.js 404 (Not Found) GET http://localhost:3000/babel-plugin-syntax-decorators.js 404 (Not Found) GET http://localhost:3000/babel-plugin-syntax-function-bind.js 404 (Not Found)

correct would be (starting with node_modules):

GET http://localhost:3000/node_modules/babel-runtime/core-js/get-iterator.js GET http://localhost:3000/node_modules/babel-plugin-syntax-class-properties.js ... ...

What im doing wrong?

Info

Mac OS X El Capitan Chrome v51 Systemjs v0.19.36 plugin-babel v0.0.13

<!doctype html>

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/systemjs/plugin-babel/issues/56, or mute the thread https://github.com/notifications/unsubscribe-auth/AAkiysc6ILnhVdgcj_DDQPg84QRe1xPjks5qf0IlgaJpZM4Jj7oI .

SerkanSipahi commented 7 years ago

@guybedford you mean if i have additional plugins like ( transform-decorators-legacy, etc ) i have to build them before?

like this:

builder.config({
    map: {
        'systemjs-babel-build': 'path/to/systemjs-plugin-babel/systemjs-babel-node.js',
        'babel-plugin-transform-class-properties': './node_modules/babel-plugin-transform-class-properties/lib/index.js',
        'babel-plugin-transform-decorators-legacy': './node_modules/babel-plugin-transform-decorators-legacy/lib/index.js',
        'babel-plugin-transform-function-bind': './node_modules/babel-plugin-transform-function-bind/lib/index.js',
    }
});
builder.bundle('app/bootstrap', 'out-bundle.js');

Is this behavior on the fly possible without bundling?

guybedford commented 7 years ago

@SerkanSipahi the alternative in Node is to use @node requires:

builder.config({
  'babel-plugin-transform-class-properties': '@node/babel-plugin-transform-class-properties'
});

but then it won't work in the browser. The browser use case is exactly what jspm is designed to assist with.

SerkanSipahi commented 7 years ago

@guybedford, sorry for the late reply ! I use my proven use case -> compile everything with babel and using as module loader systemjs ( with transpiler: false ). This works fine for me.

systemjs / plugin-babel

plugin-babel does not work as described in documentation #56