search

errbuddy / babel-asset-pipeline

babel.js transformation for asset-pipeline
10 stars 6 forks source link

How can I use babel-asset-pipeline in the task 'gradle assetCompile'? #8

Closed yuki-takei closed 8 years ago

yuki-takei commented 8 years ago

How to reproduce?

  1. Grails 3.0.9
  2. use 'net.errbuddy.plugins:babel-asset-pipeline:1.4.3'

  3. add some ES6 codes:

    • example.es6 example.es6.js
    class MyExample {
}

  4. configuration

    • build.gradle
    buildscript {
   ...
   dependencies {
       classpath "org.grails:grails-gradle-plugin:$grailsVersion"
       classpath 'com.bertramlabs.plugins:asset-pipeline-gradle:2.6.9'
       classpath "net.errbuddy.plugins:babel-asset-pipeline:1.4.3"
   }
}
    • application.groovy
    grails.asset.babel.enabled = true
grails.asset.babel.processJsFiles = true
  5. gradle assetCompile
    (It's also reproduced with grails war)

    What does it caused?

You'll get:

4:55:21: Executing external task 'assetCompile'...
:assetCompile
Processing File 1 of 31 - apple-touch-icon-retina.png
Writing File 1 of 31 - apple-touch-icon-retina

...(snip)...

Processing File 20 of 31 - application.js
Uglifying File 20 of 31 - application
application.unminified.js:9839: ERROR - this language feature is only supported in es6 mode: class. Use --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT to enable ES6 features.
class MyExample {
^

...(snip)...

Examination 1

The error 'this language feature is only supported in es6 mode' seems to be come from Google Closure Compiler. In the case of adding the following lines to build.gradle, ES6 codes were transpiled to ES5.

assets {
    minifyOptions = [
        languageMode: 'ES6',
        targetLanguage: 'ES5',
        optimizationLevel: 'SIMPLE'
    ]
}

Examination 2

In the case of using the following lines in build.gradle, ES6 codes were copied without being transpiled.

assets {
    minifyJs: false
}

Questions

peh commented 8 years ago

hey @yuki-takei i tried to reproduce it but i really cant I created https://github.com/peh/babel-test-app which should be what you did. running grails war or gradle assetCompile works just fine and the resulting application.js is minified es5 code (without doing anything else then enabling the plugin)

the only difference (although it should really not be an issue) is that i enabled it in application.yml but this should make no difference as it is enabled by default...

PS: i made you a collaborator of the test repo so you can push a reproducable test case... PPS: thank you for reporting all those issues in such a nice way.

peh commented 8 years ago

regarding your third question: actually thats what you would do in a node project too so i would say it is the ideal way.

yuki-takei commented 8 years ago

@peh Thank you for prepare the repos for testing. Thanks to that I'm able to understand in detail the current situation.

Fist, I'm sorry, 'How to reproduce?' I wrote was not correct. It doesn't happen by 'example.es6' but 'example.es6.js'.

Examination 3

When you run gradle assetCompile,

So it seems that grails.asset.babel... settings doesn't work when we run gradle assetCompile.

peh commented 8 years ago

my findings so far: for gradle assetCompile he cannot know any grails application specific configuration thats why there is a special assets block in build.gradle there you can do: assets { minifyJs = false minifyCss = false configOptions = [babel: [enabled: true, processJsFiles: true]] }

but it still looks like as if asset-pipeline is ignoring the existence of babel-asset-pipeline completly in assetCompile... will investigate further

maybe @davydotcom has any idea.

peh commented 8 years ago

omg! i just realized i missed something.

actually my last answer is what was missing in the first place... you have to define those configOptions to enabled JS processing in build.gradle and put the plugin into buildscript dependencies... now everything is working like it should can you double check that i have not done black magic on my machine @yuki-takei i will prepare an updated README

davydotcom commented 8 years ago

You did it! Or you can define Babel as an asset dependency instead of compile... This will cause the asset pipeline plugin to add it to buildscript automagically

Sent from my iPhone

On Dec 17, 2015, at 3:24 AM, Philipp Eschenbach notifications@github.com wrote:

omg! i just realized i missed something.

actually my last answer is what was missing in the first place... you have to define those configOptions to enabled JS processing in build.gradle and put the plugin into buildscript dependencies... now everything is working like it should can you double check that i have not done black magic on my machine @yuki-takei i will prepare an updated README

— Reply to this email directly or view it on GitHub.

peh commented 8 years ago

but then the options from application.yml would still be ignored no?

davydotcom commented 8 years ago

Correct has to go in gradle file too

Sent from my iPhone

On Dec 17, 2015, at 7:49 AM, Philipp Eschenbach notifications@github.com wrote:

but then the options from application.yml would still be ignored no?

— Reply to this email directly or view it on GitHub.

peh commented 8 years ago

cool, thank you for that clarification. i will add that to the readme.

yuki-takei commented 8 years ago

Examination 4

When I run gradle assetCompile,

@peh I understand that following settings are needed in build.gradle to transpile *.js:

assets {
    configOptions = [
        babel: [
            enabled: true,
            processJsFiles: true  // add if you want to transpile '*.js'
        ]
    ]
}

Thank you!

peh commented 8 years ago

but thats because on the "broken" commit 3775f7 you disabled it completly in the babel settings?!

yuki-takei commented 8 years ago

I am sorry for misleading you.

The state of the branch should-not-be-transpiled I made is NORMAL. It doesn't process *.es6 because I disabled at the commit 3775f7 as you pointed out, as I expected.

I think this issue can be closed after you update README.md.