I want to configure the babel options in my Ember app to either ignore the data-stubs folder, or set compact to false so I can silence the following error during builds:
[Babel: my-app > applyPatches][BABEL]
Note: The code generator has deoptimised the styling of dev/my-app/tests/data-stubs/foo.js
as it exceeds the max of 500KB.
Accepted answers on StackOverflow say to configure the .babelrc file with {"compact": false}, but that isn't working with ember-cli builds. Reference Answer:
BABEL Note: The code generator has deoptimised the styling of "app.js" as it exceeds the max of "100KB in Meteor
I made a .babelrc file in the root folder of my ember app and have tried many different configurations:
{
"ignore": ["**/data-stubs/*.js", "tests/data-stubs/*", "*tests/data-stubs/*"], //do not translate our stub files
"compact": false,
"env": {
"development": {
"compact": false
}
}
}
None has any effect and always results in the The code generator has deoptimised the styling error message. I also put a .babelrc file into the data-stubs folder with the same settings as above, and that isn't working either.
This is expected. Ember uses ember-cli-babel which states in documentation:
If you need to customize the way that babel-preset-env configures the plugins that transform your code, you can do it by passing in any of the babel/babel-preset-env options.
Note: .babelrc files are ignored by default.
While you can configure babel and ember-cli-babel in your ember-cli-build.js, I think compact will not work because of this open issue.
However you can specify exclude.
As of now, only the top level options destined for #babel/preset-env will work with ember-cli-babel . Unfortunately compact is not one of those.
Related
I'm using WebStorm 2017.1.3, although also tried with latest EAP, and i can't get import from statement to work. I just keep getting the following error:
import Utils from './utils'
^^^^^^
SyntaxError: Unexpected token import
In my packages.json i have babel-cli, babel-preset-env and babel-preset-es2015 defined. I have followed various blog posts and videos but still get same error.
ES6 is enabled in settings and i tried adding Babel file watch as per documentation but nothing seems to work. This feels like it should be a lot easier and just work, so i must be missing a important part of the jigsaw.
Does anyone have a working step by step, from fresh project, how to guide in configuring webstorm to work with import ?
Some places say use file watch, others say just to change project configuration interpreter to use babel-node. Other say must use Gulp... very confusing.
Thank you.
fLo
To make things clear: this is not about configuring WebStorm, error comes from Node.js interpreter that runs your code. Node.js still doesn't support ES6 modules natively (actually, no JavaScript runtime currently supports them - ECMAScript does not define a "Loader" specification which determines how Modules are inserted into the runtime. The Loader spec is being defined by WHATWG, but is not yet finalized). So, to get ES6 imports/exports accepted, you need using transpilers. Current industry standard is Babel
The most simple way to make it work is the following:
install babel in your project using npm install --save-dev babel-cli babel-preset-env
create a .babelrc file in project root dir:
{ "presets": ["env"] }
in your Node.js Run configuration, pass -r babel-register to Node:
With this configuration, your code will be transpiled on-the-fly by Babel, no file watchers, etc. are needed
when I want to build my ember electron app with ember electron:package
I always get the error:
Build failed.
File: assets/vendor.js (91129:6)
The Broccoli Plugin: [UglifyWriter] failed with:
followed by several lines of "Error at...:" (always within node_modules)
I could figure out that it must have something to do with ember-browserify.
I am importing this node module in a service.js file:
import Usabilla from 'npm:usabilla-api';
The curious thing is, that with ember electron (like ember serve) everything is fine and I can use the node module without any errors. Issues only occur when I want to package the app to the .dmg and exe files for distribution.
What am I missing ?
Thanks for any help or hints!
Your build is failing on the minification step. Possibly because of the size of one of the packages you're pulling in or because it's already been minified. Minification only happens when you're building for production or packaging which is why you're not seeing the issue when you run locally.
From the EmberCLI docs on minification, where you'll find more on the minifaction step:
the js-files are minified with broccoli-uglify-js in the production-env by default. You can pass custom options to the minifier via the minifyJS:options object in your ember-cli-build
You can exclude specific files/resources that are causing problems:
To exclude assets from dist/assets from being minificated, one can pass options for broccoli-uglify-sourcemap
I just create the demo app in c drive and it's working perfectly.
I have the following structure:
app/
pods/
components/
user-login/
component.js
style.scss
template.hbs
Template files and component files livereload correctly, however, when I save changes to my style files in Atom the changes are not applied on the webpage- they are only applied when I kill and rerun:
ember server
and reload the webpage. I have installed the following:
ember-cli-styles-reloader
and I have tried adding:
"liveReload": true,
"watcher": "polling"
to:
.ember-cli
and I also tried adding these options to:
ember-cli-build.js
inside the app variable.
What am I missing?
There is a better option I believe, and I recommend to do this way:
First install ember-cli-sass-pods addon that uses ember-cli-sass (will install automatically) and then generate your style scss files into your pods directories.
to install
ember install ember-cli-sass-pods
then add
var app = new EmberApp(defaults, {
// you must add Watched folder to your Ember-Cli-Build.js
sassOptions: {
includePaths: ['app']
}
});
For example:
app/components/user-login
app/components/user-login/component.js
app/components/user-login/template.hbs
app/components/user-login/style.scss
just simply run this command:
ember g style [path] -p //your path now is components/user-login
there are more options that you can read their documents
You are ,after installing and setting up that, able to use ember-cli-styles-reloader which probably will work smoothly. make sure you have followed all the rules that they mentioned in their documents to set up ember-cli-styles-reloader.
I have set up a basic project and only .scss files are picked up. I would like to write my CSS with the .sass format. How can I turn that on?
You can override the app script config files:
https://github.com/driftyco/ionic-app-scripts#overriding-config-files
In my package.json, I added the following:
"config": {
"ionic_sass": "./config/sass.config.js"
}
I created the sass.config.js (copy from the github project) and added the sass extension:
includeFiles: [
/\.(scss|sass)$/i
],
It's unfortunately impossible to update the watch config file, so I directly edited it in the node module:
Under #ionic/app-scripts/config/watch.config.js
Add the following .sass line below .scss:
'{{SRC}}/**/*.scss',
'{{SRC}}/**/*.sass'
i'm using ember-cli 0.1.5,
I'd like to build a css file for each 'skin-*.less' file in the app/styles folder. This works with plain CSS using the following config in my Brocfile.js:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'skin-light': '/assets/skin-light.css',
'skin-dark': '/assets/skin-dark.css'
}
}
}
});
After installing a LESS precompiler with 'ember install:addon ember-cli-less' this config is not respected and instead 'ember build' looks for app/styles/app.less.
Is there a way to make the broccoli less compiler respect the multiple outputPaths config for CSS files?
It would appear not; that’s a pull request for that very functionality, but it’s reportedly buggy.
This functionality is now available in ember-cli-less v1.1.0