I have a trying to use Bower.io with my RequireJS AMD project but I'm pretty new to it. I have a plugin in my bower.json file thats like
"jquery-ui-touch-punch": "https://github.com/furf/jquery-ui-touch-punch.git",
but the problem is that this file is not wrapped in AMD - so it errors. I can manually edit the file to wrap it - but that makes no sense for the purposes of using bower. Is there some resource I can use or a way I can make this wrap inside requireJS ?
shim: Configure the dependencies, exports, and custom initialization
for older, traditional "browser globals" scripts that do not use
define() to declare the dependencies and set a module value.
http://requirejs.org/docs/api.html#config-shim
Related
I need to set stylelint globally because it seems like unnecessary work to configure every single project alone, and I am just unable to find such guide anywhere.
How to do this please?
it seems like unnecessary work to configure every single project alone
stylelint allows you to extend an existing configuration.
You can create your configuration file once and then extend that within each of your projects, like so:
// .stylelintrc
{
"extends": "../my-stylelint-config.js"
}
Many users publish their configurations to npm, so that they can install them into new projects using npm install their-config-as-package --save-dev.
Alternatively, AtomLinter has a configuration option to use the stylelint standard configuration.
Does anybody know how to use workbox without getting it from the CDN? I tried this...
add workbox-cli to my dependencies:
"workbox-cli": "^3.6.3"
which gets me all of the following dependencies
$ ls node_modules | grep workbox
workbox-background-sync
workbox-broadcast-cache-update
workbox-build
workbox-cacheable-response
workbox-cache-expiration
workbox-cli
workbox-core
workbox-google-analytics
workbox-navigation-preload
workbox-precaching
workbox-range-requests
workbox-routing
workbox-strategies
workbox-streams
workbox-sw
Then I replaced this line in the examples
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');
with this
importScripts('workbox-sw.js');
after copying node_modules/workbox-sw/build/workbox-sw.js to the public folder
But now I realise by looking at the network tab, that that file still gets all the other modules from the cdn
(I thought it would be build with everything inside it.)
Can anybody tell me if there is an npm package somewhere that already has everything inside it? Or should I copy the modules I need from the npm folder, and somehow tie them all together myself? Or do I have to use the webpack plugin? (which I guess will only bundle the modules that I use)
(Update: Workbox v5 makes the process of using a local copy of the Workbox runtime much simpler, and in most cases, it's the default.)
There's one more step that's required. The "Using Local Workbox Files Instead of CDN" has the details:
If you don’t want to use the CDN, it’s easy enough to switch to
Workbox files hosted on your own domain.
The simplest approach is to get the files via workbox-cli's
copyLibraries
command
or from a GitHub Release, and then tell workbox-sw where to find
these files via the modulePathPrefix config option.
If you put the files under /third_party/workbox/, you would use them
like so:
importScripts('/third_party/workbox/workbox-sw.js');
workbox.setConfig({modulePathPrefix: '/third_party/workbox/'});
With this, you’ll use only the local Workbox files.
I'm using ember-cli and I made a custom component using ember-cli syntax & naming conventions. This is a highly reusable component and I'd like to know what is the better way to put it all into a "package" so it's easy to integrate into other projects.
My component use a .js file for the Ember.Component subclass along with a .hbs file for the template and yet another couple of .js files for the necessary Ember.View subclasses. Right now, every file is in its respective folder along with the files for the rest of my project.
How can I isolate the files related to the component and package them for reuse? In Ruby on Rails I use gems for this matter, and in jQuery I used to write plugins by extending $.fn in a single file.
Take advantage of Ember CLI addon system. It's been designed for cases like this one. The process should be easy if you are familiar with Ember CLI already. As Ember CLI addon system's been reworked in the recent past and it's API was changing it's possible that older articles or guides on this topic became out of sync.
The most comprehensive and kept in sync guide on this topic is kristianmandrup's gist Converting libraries to Ember CLI addons.
There is also an Addons tutorials section on the official Ember CLI site.
I use broccoli-less in my ember cli project and would like to use an addon (ember-cli-materialize), which uses broccoli-sass.
After installing the addon, i get: File to read not found or unreadable ../app.scss, because i also have an app.less file in my styles dir.
As i understand, this commit Allow multiple preprocessors per type should make it possible, although i might be missing something. Has anyone managed to use ember-cli with multiple preprocessors, and what changes is needed?
Ember-cli version: 1.13.1
Ember version: 1.12.0
Thanks
I know your circumstance is different than mine but this may help others or spur a better solution. I was added to a dev team to polish up an app already styled using LESS. I favor SASS and tried to use ember-cli-sass alongside ember-cli-less without any success.
You may want to look further into Ember-Cli's add.import
By adding your input configurations to ember-cli-build.js with the above, you can leverage either your bower-components directory (if used) or vendor directory, to import a compiled CSS doc (from Sass source files) that will build alongside the project quite nicely with a simple sass --watch <input:output> command.
The LESS files are ultimately compiled to app.css, and your SASS files to vendor.css (make sure you link to the stylesheet in your index page/template).
I'm trying to get some options out of a separate config.coffee into my main app.coffee. The way I try doesn't work somehow, I'm only getting:
ReferenceError: Can't find variable: require
Here are my two files, I really hope you can help me out here.
# app.coffee
config = require './config.coffee'
console.log config.api_key
# config.coffee
exports.config =
api_key: 'MY_SECRET_API_KEY'
oh, I thought if I require another file and compile my app.coffee it gets included.. is there a way to do this or do I have to put everything in one file?
You might want to edit your question to specify this.
There are some projects that let you "require" files and introduce a build step to concatenate and minify them into a single one. Not all of them follow the Common/JS module spec. You can also use AMD based tools to load files asynchronously.
Sprockets
Which uses comments like #= require jquery to require other files and then compiles them into a single file. While it's aimed at Rack based apps, it has a command line tool which you can use to automate the process.
url: https://github.com/sstephenson/sprockets
Snockets
This is based on Sprockets, but it runs on Node.js
url: https://github.com/TrevorBurnham/snockets
Browserify
This is another Node.js based tool.
Make node-style require() work in the browser with a server-side build step, as if by magic!
https://github.com/substack/node-browserify
Require.JS
This is AMD based, so it can load files asynchronously, but it also has an optimizer wich can concatenate files.
I'm sure there are many more. Each have their own way of doing things and you can make them work with CoffeeScript.