I've got the NPM package xlsx as a dependency in my ember app which comes with an optional module for translations. When I build my app with Ember-CLI I'd like to specify somehow that this optional module be excluded.
The README for that package states “Webpack and browserify builds include optional modules by default. Webpack can be configured to remove support with resolve.alias:”
I'm not sure how I could configure my ember-cli-build.js to work with this.
I do know that I can download the package, build it myself, and then stick the resulting files in my vendor directory but this feels like the wrong way to go about it.
Does anybody have experience with this sort of situation?
Edit
I'm currently including xlsx in my app as a dependency inside my package.json and simply importing it within one of my components.
If you take a look into your node_modules/xlsx/dist/ folder you'll see that there are several different versions of xlsx available: core, full and a third version without a specifier.
You can use either of those versions by putting for example
app.import('node_modules/xlsx/dist/xlsx.core.min.js');
in your ember-cli-build.js file.
Note that the above requires Ember CLI 2.15 or above. If you use an older Ember CLI version you should either upgrade or install xlsx from Bower instead.
Related
I want to move some of utility functions and classes from my Ember app into a separate NPM library and import it with ember-auto-import. I don't want to transpile the library code before publication but publish in authoring format. This shouldn't be an issue as ember-auto-import transpiles the code automatically at build time depending on app's configuration.
But this code is experimental decorators feature as many Ember code these days does. Babel used by ember-auto-import throws an error that the decorators-legacy feature is not enabled:
Support for the experimental syntax 'decorators-legacy' isn't
currently enabled
How can I enable it in the configuration of ember-auto-import? I only see an option to disable transpilation per dependency and custom webpack configuration in ember-auto-import's documentation. I don't have much experience with Webpack. Is babel controlled through Webpack configuration?
I just noticed that I get the same error if I reference a dependency on local file system using link protocol. I don't see the error if I use file protocol. I'm using yarn. This issue was solved by deleting node_modules and installing dependencies in referenced addon.
This might be a silly question stemming from unfamiliarity. I'm rewriting a project that was previously using Ember 1.7 in Ember 2.3, using Ember-cli v2.2
Now, in the old project, there were a couple of libraries being included manually on the index.html file, put in the scripts directory and then compiled. For example, let's say the JS asset I want to include is offline.js.
I understand that Ember-cli uses Bower and can be used to install bower components, like Bootstrap or moment.js and such. What about custom JS? I've put the file in offline.js, included it in index.html but that doesn't do anything.
I don't think I understand how to add/import vendor assets at all; how do add, say offline.js to the project and have it available throughout the application?
You should add the offline.js file to the vendor folder at the root of the project, and then in your ember-cli-build.js file add the following line:
app.import('vendor/offline.js');
This adds the offline.js file to the vendor.js which is built by default. You can see more documentation at the Ember CLI website.
I'm trying to roll back to v1.0.0-beta.16 after having used v1.0.0-beta.17.
I uninstalled version .17 and installed version .16, which seems to have worked according to npm:
$ npm list --depth=0
...
├── ember-data#1.0.0-beta.16
...
But when I run ember it still seems to use version .17 according to the Chrome console:
Any ideas?
You should change the version in both package.json and bower.json files. Bower stands for managing your plain JS or CSS assets and ember-data is one of them. On the other hand, npm packages will need ember-data and specify it in your package.json also. Just always remember to change versions of plain JS files in both of them.
I have a git repo for an Ember Addon:
https://github.com/lifegadget/ui-responsive-toolbelt
It passes all unit tests. It has been published to npm as ui-responsive-toolbelt. I have used npm's "link" functionality to test locally that this "addon" (in Ember parlance) works fine in consuming application when included in the package.json file as a dependency.
Surprisingly, and I'm completely flummoxed on this, when npm installs this dependency into an Ember project directory it brings across a vast majority of the files without complaining. From NPM's perspective it appears to be a clean install. Unfortunately an addon depends heavily on it's "entry point" which is the index.js in the root directory of the repo. I have very clearly included this file in the repo but for some reason it is not being brough over!
I have tried this on two computers and three Ember projects and all have the same outcome. Please help!
the error message I get from Ember-CLI when I try to start the server with ember serve is:
The package ui-responsive-toolbelt is not a properly formatted package, we have used a fallback lookup to resolve it at /path/to/project/node_modules/ui-responsive-toolbelt. This is generally caused by an addon not having a main entry point (or index.js).
This message is repeated twice and then I get:
The ui-responsive-toolbelt addon could not be found at /path/to/project/node_modules/ui-list/node_modules/ui-responsive-toolbelt.
I confirmed that your repo looks fine
npm install ui-responsive-toolbelt does not download the index file
So the problem is that npm publish is not working properly. There is a bug filled for that. https://github.com/npm/npm/issues/5082
What you can do is publish again your addon using a recent npm version (or play with older versions) until you see that the index file is added too.
I want to have some custom steps run during them ember cli build, is there a supported way to do that? Specifically, I want to parse comments in css files and build write files to the public directory based on those comments.
You should create an ember-cli addon to create extra build steps. There is some good documentation around on Google, but here is a blog post I used to create addons. This guide is more tailored toward creating ember components but there are other ember-cli hooks you could use to run code during the build process.
Perhaps you could use the included hook to run some code to read your css files and then import your files into the public directory. Other hooks that you could use are documented here
Alternatively, if there is a broccoli plugin that does what you want, you simply need to add it to your package.json and run npm install. Now the plugin has been added to the build system.