facebook

Instructions on Installing and Using Babel with MyEclipse for ES6+

  1. MyEclipse IDE
  2.  > 
  3. Installation, Configuration & Updates
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #602125 Reply

    matthew friend
    Participant

    Hi Folks:
    Does anyone know of a site or place where I can find a tutorial on how to set up MyEclipse to use BABEL to transpile ES6 to ES5?

    (I see in Codemix it says Babel… but I don’t know where the settings, etc. to set it up in MyEclipse).

    Thanks for any help,
    Matthew

    #602134 Reply

    support-swapna
    Moderator

    Matthew,

    Thanks for asking. I have escalated your concern to the dev team and they will get back to you soon about where we stand in terms of Babel support in MyEclipse.

    Thanks for your patience.

    –Swapna
    Genuitec Support

    #602169 Reply

    Hi Matthew,

    I have attached an example project that you can use as a reference to use Babel to transpile ES6 -> ES5 with CodeMix.

    Along with the example project, I’ll leave you a detailed list of steps to help you configure Babel to work with CodeMix:

    • Install Babel related dependencies by opening running the following command in a Terminal+ tab for the project:
    • npm i -D @babel/cli @babel/core @babel/preset-env

    • Create a .babelrc file configure babel with following contents:
    • 
      {
          "presets": [
              ["@babel/preset-env", {
                  "forceAllTransforms": true
              }]
          ],
          "sourceMaps": "inline"
      }
      // sourceMaps: It needs sourcemaps in order for debugging to work properly, this will generate inline sourcemaps while transpiling.
      // forceAllTransforms: Force babel to transform all the code to be ES5 compliant.
      
    • Add scripts to package.json to build the project, this will transpile src and put it in out:
    • 
      ...
      "scripts": {
      	"build": "babel src --out-dir out",
      	"watch": "babel src --out-dir out --watch",
      }
      
    • Create .vscode/tasks.json with tasks so our scripts are detected and can be used by using the Build icon:
    • 
      {
          "version": "2.0.0",
          "tasks": [{
                  "type": "npm",
                  "script": "build",
                  "problemMatcher": [],
                  "codemix": {
                      "lifecycle": "build"
                  }
              },
              {
                  "type": "npm",
                  "script": "watch",
                  "problemMatcher": [],
                  "codemix": {
                      "lifecycle": "watch"
                  }
              }
          ]
      }
      
    • Edit .vscode/launch.json to launch the transpiled js when debugging:
    • 
      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Launch Program",
              "program": "${workspaceFolder}/out/app.js",
              "cwd": "${workspaceFolder}/out"
          }]
      }
      

    Cheers,
    Sal

    • This reply was modified 6 years ago by Salvador Cabrera.
    • This reply was modified 5 years, 12 months ago by support-tony. Reason: Corrected the "scripts" property name in package.json
    Attachments:
    You must be logged in to view attached files.
    #603184 Reply

    matthew friend
    Participant

    Hi Salvador:

    Thanks for trying to help. I imported your project and ran the npm code above but nothing seems to happen. Nothing is created in the ‘out’ folder. Is there something else I’m missing?

    (I am able to the code to transpile in a competitors IDE using what they call a “File Watcher”.

    Any ideas what else I need to do?

    Attachments:
    You must be logged in to view attached files.
    #603284 Reply

    support-tony
    Keymaster

    Matthew,

    I’m sorry we didn’t get back to you earlier. From some further testing of the sample project, we noticed that the tasks in tasks.json file (within the .vscode folder) are not picked up automatically when the project is imported. This prevents the watch operation from working as expected for the default build configuration (see this article for information on build pipelines). However, once you restart eclipse, the tasks will be picked up and you will just need to click the build icon at the bottom right of any editor for a file in the project (depending on how the build icon is configured) and a build will be triggered immediately and for any changes. This should produce output in the out folder.

    Could you try the above and let us know how you get on?

    Also, we’re interested to know which npm commands you ran, as mentioned in your last reply. For example, if you ran babel src --out-dir out in a Terminal+ session, from the root folder of your project, then you should have the transpiled app.js file in the out folder.

    Could you just confirm that you’ve installed our CodeMix plugin into MyEclipse? This is what we’ve assumed from your opening post but we just want to be sure.

    Lastly, I just wanted to mention that there was a slight error in Sal’s general instructions on setting this up in your project: the "scripts" keyword was misspelled, so if you copy and pasted, you might not get the expected results. This has now been corrected.

    • This reply was modified 5 years, 12 months ago by support-tony.
Viewing 5 posts - 1 through 5 (of 5 total)
Reply To: Instructions on Installing and Using Babel with MyEclipse for ES6+

This topic is marked as closed to new replies, however your posting capabilities still allow you to do so.

You must be logged in to post in the forum log in