EmberJS: Customize Ember CLI build

Question

I want to transform a file and put it in another directory as a part of the dev and prod build processes. How can I achieve this?

I have a JSON file in a nested format. Something like { level1: { level2: "Hello" } }, which I wanna flatten to { "level1.level2": "Hello" } during build and put in the same folder. — karthikaruna
Do you know if there is an existing babel transform that does this? I know the broccoli part, but I don't know if that kind of transform already exists, or if we'll need to code it ourselves. — NullVoxPopuli
I figured out the code for doing the transformation. I just wanna know how to chain it to the build process. — karthikaruna

NullVoxPopuli NullVoxPopuli · Accepted Answer · 2018-10-03T12:24:11

I think reading through all this will help: http://www.oligriffiths.com/broccolijs/

It's a tutorial an how broccoli works, and how it transforms trees of files.

For your particular situation, this page will be of interest: http://www.oligriffiths.com/broccolijs/05-es6-transpilation.html

specifically, this:

const funnel = require('broccoli-funnel');
const merge = require('broccoli-merge-trees');
const compileSass = require('broccoli-sass-source-maps')(require('sass'));
const babel = require('broccoli-babel-transpiler');

const appRoot = 'app';

// Copy HTML file from app root to destination
const html = funnel(appRoot, {
  files: ["index.html"],
  annotation: "Index file",
});

// Copy JS file into assets
let js = funnel(appRoot, {
  files: ["app.js"],
  destDir: "/assets",
  annotation: "JS files",
});

// Transpile JS files to ES5
js = babel(js, {
  browserPolyfill: true,
  sourceMap: 'inline',
});

// Copy CSS file into assets
const css = compileSass(
  [appRoot],
  'styles/app.scss',
  'assets/app.css',
  {
    sourceMap: true,
    sourceMapContents: true,
    annotation: "Sass files"
  }
);

// Copy public files into destination
const public = funnel('public', {
  annotation: "Public files",
});

module.exports = merge([html, js, css, public], {annotation: "Final output"});

hope this helps / gives you enough information to achieve what you need

EmberJS: Customize Ember CLI build

1 Answers