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.
This semester, I began learning Vue. Our first "assignment" for the Vue phase was to follow along with, and complete, the instruction provided by a YouTube video from Traversy Media. This video was great to follow, evident that I was able to complete its objective with little difficulty. However, I don't feel that I quite understand the relevance of each file within a Vue project, such as index.js, index.html, *.vue.
I've found a few videos which create a component and then utilize that component. However, I feel completely lost when downloading a component, specifically: 'Vue-Accordion' from github to use as my navigation in conjunction with vue-router. The vue-accordion instructions simply state to add specific code, but doesn't say to which file I should add this code.
I've hacked at it by guessing/assuming a file that I figured relevant to the task, such as app.vue, index.js, and index.html... to no avail. Certainly, I think that a better understanding of a Vue Project's file-structure/hierarchy could give me a better feel in knowing exactly what files are relevant to any task-at-hand that I may have.
Alright so schools in session (sorry if I explain too basic stuff at times, just trying to be thorough).
Here's the basic structure for a Vue project using vue init webpack-simple my-project:
src/
assets/
logo.png
App.vue
main.js
.babelrc
.gitignore
index.html
package.json
README.md
webpack.config.js
The src folder contains all the source files of your project.
The src/assets folder contains all your assets, primarily images.
App.vue is the first "view" of your app.
main.js is the main script of your project where you configure and run Vue. This is where you load anything that should exist in the global scope of your app.
.babelrc configures how the babel tool should syntax check your code.
.gitignore tells Git to ignore certain files from committing.
index.html is the page that's sent to the clients browser. This is where we load the main.js file and put any and all meta data you need (unless you use e.g. vue-meta to handle it there instead). Note that <div id="app"> html tag, this is where all your Vue files get mounted to.
package.json is our npm configuration file. When you run e.g. npm install --save component-from-npm-name it's saved here so you can just run npm install later to get all the dependencies of your project.
README.md is a documentation file in the Markdown language format. It's displayed as the frontpage of your project on e.g. Github or Gitlab.
webpack.config.js is a Node.js file that is responsible for running Webpack on your project. Vue can be used without Webpack but I don't recommend it. You can run node webpack.config.js directly to build your project. This file is your build script, you configured this to handle the build process of your project.
So, armed with this information, lets get to your question.
How do you load a component in Vue.js?
Run npm install --save vue-accordion (note that while the source code is hosted on Github, the package is downloaded from here: https://www.npmjs.com/package/vue-accordion)
In your index.js file, which is responsible for loading things to your Vue app in the global context, you do as the Github page tells you and first import {vueAccordion} from 'vue-accordion', then run Vue.component('vue-accordion', vueAccordion) to register it in the global context.
That's all there is to it. index.jsis your entry point for your Vue app, while webpack.config.js is your build script.
There is however an alternative solution to loading components. In the previous variant we loaded it in index.js to load it in the global context, i.e. you can use the component now anywhere in your app, but what if you only want to load it on an as-is-needed basis (you'd wanna do this for performance reasons)?
Well, in your App.vue file you have a <script> tag where you can configure things in just that Vue component (all .vue files are Vue components, even if you call them routes, pages, views or whatever to indicated their purpose). In order to load a component not in the global context, but the component context, you'd do the following in App.vue:
<script>
import Accordion from 'vue-accordion';
export default {
components: {
'vue-accordion': Accordion
}
</script>
Tips...
This is just one setup for a Vue project. A Vue project can be as simple as just loading Vue as a script to your static index.html file, then you can have a much more annoying setup with regular javascript files, but that's dumb and inefficient. So, a proper project has a Node.js file to run Webpack. Depending on how you configure Webpack your project can act quite differently from any other Webpack project.
Read up more on how Webpack works so you can have a project structure that makes sense for you.
Take a look at Nuxt, it's essentially a collection of other projects (primarily Vue and Webpack) that simplifies the making of a powerful Vue project. You can sit and set up your own Vue project and all the tools yourself and get the same result, but Nuxt makes it simpler for you to do.
To install a specific GitHub repository as a node dependency.
Actually, it doesn't matter if it is a dependency for Vue or React
it is related to setting in the package.json dependency from a GitHub source.
You need to modify your package.json file. In the dependencies section, add the package name as the property name and, as a value, the username of the repository in GitHub and the repository directory.
e.g
"dependencies": {
"#zeratulmdq/vue-accordion": "zeratulmdq/vue-accordion"
}
and then to import the component
import VueAccordion "#zeratulmdq/vue-accordion"
It is not related to your desired repository, but just in case the selected repository package.json file does not point to the correct main property, it will not load the component, so you will need to point to the specific component file to import, e.g:
import VueAccordion "#zeratulmdq/vue-accordion/src/index.js"
or
import VueAccordion "#zeratulmdq/vue-accordion/src/App.vue"
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 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