[matthew friend]

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

[support-swapna]

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

[Salvador Cabrera]

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 6 years ago by support-tony. Reason: Corrected the "scripts" property name in package.json

Attachments:

You must be logged in to view attached files.

[matthew friend]

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.

[support-tony]

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 6 years ago by support-tony.

[Author]

Posts