I am try use Ember 2.0 and have next files
config.js
System.config({
"baseURL": "/static/js",
"transpiler": "traceur",
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js"
}
});
System.config({
"map": {
"ember": "github:components/ember#2.0.0",
"traceur": "github:jmcriffey/bower-traceur#0.0.88",
"traceur-runtime": "github:jmcriffey/bower-traceur-runtime#0.0.88",
"github:components/ember#2.0.0": {
"jquery": "github:components/jquery#2.1.4",
"handlebars": "github:components/handlebars#1.3.0"
}
}
});
app.js
import Ember from "ember";
let App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true,
});
and index.html
<script src="{% static "js/jspm_packages/system.js" %}"></script>
<script src="{% static "js/config.js" %}"></script>
<script>
System.import('app');
</script>
aftre load i have next error
Uncaught (in promise) Error: Cannot read property 'Ember' of undefined
Error loading http://localhost:9090/static/js/app.js
at http://localhost:9090/static/js/jspm_packages/github/components/ember#2.0.0/ember.js!transpiled:16:38
at http://localhost:9090/static/js/jspm_packages/github/components/ember#2.0.0/ember.js!transpiled:97:11
at execute (http://localhost:9090/static/js/jspm_packages/github/components/ember#2.0.0/ember.js!transpiled:25603:9)
at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20821)
at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
at Object.Promise.all.then.execute (http://localhost:9090/static/js/jspm_packages/system.js:4:23421)
at b (http://localhost:9090/static/js/jspm_packages/system.js:4:7874)
at S (http://localhost:9090/static/js/jspm_packages/system.js:4:8253)
at p (http://localhost:9090/static/js/jspm_packages/system.js:4:6131)
if load scripts without systemjs and jspm always work. but want use jspm and systemjs :)
Before i use ember 1.13 and with config worked. I think problem with config jquery
It looks like the package for Ember is not always jspm-compatible. I always use the following override in my package.json:
"jspm": {
"overrides": {
"github:components/ember#2.0.0": {
"main": "ember.debug",
"files": [
"ember.prod.js",
"ember.debug.js"
],
"dependencies": {
"jquery": "github:components/jquery#^2.1.3"
},
"shim": {
"ember.prod": {
"deps": [
"jquery"
],
"exports": "Ember"
},
"ember.debug": {
"deps": [
"jquery"
],
"exports": "Ember"
}
}
}
}
}
It dictates jspm to install only prod and debug versions of Ember and describes all dependencies and exports properly. If you use it, you need to run jspm install again after you added it to your package.json.
You may encounter another problem with htmlbars templates. I have got a plugin to solve that: https://github.com/n-fuse/plugin-ember-hbs:
jspm install hbs=github:n-fuse/plugin-ember-hbs#2.0.0
should allow importing hbs templates w/o the need to add a compiler in dependencies.
See also a starter project I created: https://github.com/OrKoN/jspm-ember-playground
Related
I have a nearly-vanilla Phoenix setup in which I want to use select2[1]. I have bootstrap and jquery configured by means of bower. The front-end is bootstrap 4 and it all works great, so that's covered. See my bower config below.
The steps I tried are the following.
I have created a minimal working example in HTML from the website of select2, and included the js and css via a CDN. This all worked.
I have installed select2 via npm using npm install --save select2.
I have verified that the select2 data is present in my http://localhost:8000/js/app.js.
I have added the script needed to execute select2 on the option list (see below). I have added this below my import of app.js.
When I navigate to the page I have the minimal working example on (the homepage), I see this error in the console:
jQuery.Deferred exception: $(...).select2 is not a function #http://0.0.0.0:4000/:85:9
mightThrow#http://0.0.0.0:4000/js/app.js:7638:21
resolve/</process<#http://0.0.0.0:4000/js/app.js:7706:12
undefined jquery.js:3822
[Show/hide message details.] TypeError: $(...).select2 is not a function[Learn More]
I admit, I have no clue how this all works, as my knowledge is all focussed on backend related tasks. The entire codebase is on github as well [2].
Any help would be appreciated.
Relevant part of app.html.eex
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
Html added to layout.html.eex
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor", "scss", "fonts"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
sass: {
native: true,
options: {
includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // Tell sass-brunch where to look for files to #import
precision: 8 // Minimum precision required by bootstrap-sass
}
},
copycat: {
"fonts" : ["static/fonts", "node_modules/font-awesome/fonts"],
verbose : false, //shows each file that is copied to the destination directory
onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
}
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
globals: {
select2: 'select2',
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether',
Popper: "popper.js",
bootstrap: 'bootstrap'
}
}
};
[1] https://select2.org/
[2] https://github.com/m1dnight/gymlog/tree/frontend_crap
My JSPM version: 0.17.0-beta.5.
My project is using ES6 style import statement using TypeScript.
So...
I installed angular-ui-router like so:
jspm install angular-ui-router
This saves the following lines to my package.json:
"jspm" {
"overrides": {
"github:angular-ui/ui-router#0.2.17": {
"directories": {
"lib": "release"
},
"format": "cjs",
"main": "angular-ui-router",
"registry": "jspm",
"dependencies": {
"angular": "^1.3.2"
},
"meta": {
"angular-ui-router.js": {
"deps": [
"angular"
]
}
}
},
// ... other stuff
Great! So it says the file that should be loaded is located in the release folder.
But in my browser, I load my jspm.conf.js file, which says:
SystemJS.config({
"packages": {
"github:angular-ui/ui-router#0.2.17": {
"map": {
"angular": "github:angular/bower-angular#1.4.9"
}
},
}
// ... little further
"map": {
"angular-ui-router": "github:angular-ui/ui-router#0.2.17"
}
So there is no notion there that SystemJS should look in the release folder as I mentioned above. Therefor, I can't import like
import 'angular-ui-router'
but only like
import angular-ui-router/release/angular-ui-router
How do I use the overrides from package.json in my SystemJS config file jspm.config.js which is loaded in the browser?
My goals are to include the following in my HTML file and have them all work properly:
index.html:
<script type="text/javascript" src="./vendor.js"></script>
<script type="text/javascript" src="./app.js"></script>
$(document).ready(function() {
// jQuery should be available as `window.$`
$(".myclass").doSomethingWithJquery();
}
<div class="row">
<h1 class="col-md-3 col-md-offset-3">
I should be able to use bootstrap, including bootstrap's javascript libraries, in my templates
</h1>
</div>
<!-- I should be able to use app.js, with its various require('module')
statements and attach rendered HTML to the DOM (I'm using React) -->
<div id="attach-app-js"></div>
Therefore:
jQuery should be available as a global $ variable.
Bootstrap's javascript functions should also work, as they're part of vendor.js
My app.js should also work and not re-declare variables like $ that is already declared under global scope via vendor.js.
See the files below. My current solution errors where I have $(".myclass").doSomethingWithJquery(); When my internet is off, I get the error:
Uncaught ReferenceError: $ is not defined
...which makes me think that (maybe) snackbarjs or another module is leaking jQuery to global scope.
Then, when I change the line in vendor.js to: var $ = jQuery = require('jquery'); I get the error:
Uncaught ReferenceError: $ is not defined
but now it's getting called on the line $(document).ready(function.....
Third, if I comment out vendor.js entirely, I get both errors:
Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined
How can I get this frontend setup to correctly shim variables when necessary in the global scope, and not if it's not necessary??
gulpfile.js:
.task('vendor', ['clean'], function() {
var b = browserify(package.paths.vendor);
var packages = getBowerPackageIds();
packages.forEach(function (id) {
var resolvedPath = bowerResolve.fastReadSync(id);
b.require(resolvedPath, {
// exposes the package id, so that we can require() from our code.
// for eg:
// require('./vendor/angular/angular.js', {expose: 'angular'}) enables require('angular');
// for more information: https://github.com/substack/node-browserify#brequirefile-opts
expose: id
});
});
return b
.bundle()
.pipe(source(package.dest.vendor))
.pipe(gulp.dest(package.dest.dist));
})
.task('js', ['clean', 'install'], function() {
var b = browserify(package.paths.app);
// mark vendor libraries defined in bower.json as an external library,
// so that it does not get bundled with app.js.
// instead, we will load vendor libraries from vendor.js bundle
getBowerPackageIds().forEach(function (lib) {
b.external(lib);
});
var w = watchify(b, watchify.args);
var file = package.dest.app,
dest = package.dest.dist;
w = w
.transform(reactify)
.transform(browserifyShim);
w.on('update', rebundle);
function rebundle() {
return w.
bundle()
.on('error', errorHandler)
.pipe(source(file))
.pipe(gulp.dest(dest))
.pipe(shell([
'python manage.py collectstatic --noinput'
], {
cwd: '../'
}))
// TODO: Do I need this?
.pipe(browserSync.reload({stream: true}));
}
return rebundle();
})
/**
* Running livereload server
*/
.task('server', ['clean', 'install', 'vendor', 'js', 'less'], function() {
browserSync({
proxy: "localhost:8000"
});
})
/**
* Compiling resources and serving application
*/
.task('serve', ['install', 'backup', 'clean', 'lint', 'less', 'vendor', 'js', 'server'], function() {
return gulp.watch([
package.paths.js,
package.paths.app,
package.paths.html,
package.paths.less,
package.paths.python
], [
'lint', 'less', browserSync.reload
]);
})
vendor.js:
$ = jQuery = require('jquery');
require('bootstrap');
require('snackbarjs');
package.json (browserify-shim config):
"browserify-shim": {
"jquery": "$",
"bootstrap": {
"depends": [
"jquery:jQuery"
],
"exports": "bootstrap"
},
"jquery-cookie": {
"depends": [
"jquery:jQuery"
]
},
"eonasdan-bootstrap-datetimepicker": {
"depends": [
"jquery:jQuery",
"moment:moment",
"bootstrap:bootstrap"
],
"exports": "$.fn.datetimepicker"
},
"image-picker": {
"depends": [
"jquery:jQuery"
],
"exports": "$.fn.imagepicker"
},
"raven-js": {
"depends": [
"jquery:jQuery"
],
"exports": "raven-js"
},
"parsleyjs": {
"depends": [
"jquery:jQuery"
],
"exports": "parsleyjs"
}
},
"browser": {
"jquery": "./bower_components/jquery/dist/jquery.js",
"jquery-cookie": "./bower_components/jquery-cookie/jquery.cookie.js",
"image-picker": "./bower_components/image-picker/image-picker/image-picker.js",
"eonasdan-bootstrap-datetimepicker": "./bower_components/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js",
"moment": "./bower_components/moment/moment.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.js",
"raven-js": "./bower_components/raven-js/dist/raven.js",
"parsleyjs": "./bower_components/parsleyjs/dist/parsley.js"
},
I try to manage a library with no AMD-Support that depends on 3 other JS-files (https://github.com/augustl/js-epub).
I have to include the files in the following order:
<script type="text/javascript" src="zip/jszip.js"></script>
<script type="text/javascript" src="zip/jszip-load.js"></script>
<script type="text/javascript" src="zip/jszip-deflate.js"></script>
<script type="text/javascript" src="zip/jszip-inflate.js"></script>
at the moment I try to handle the dependencies via shim like that:
shim {
"zip/jszip": {
"deps": ["zip/jszip-deflate", "zip/jszip-inflate", "zip/jszip-load"],
"exports": "JSZip"
}
}
But the scripts are included in the wrong order. How can I manage that?
Best regards, hijolan
The deps dependencies array defines scripts which need to load before the shimmed script. Your shim declaration it's the wrong way around: you need to shim the modules which depend on jszip and list jszip as their dependency.
shim: {
"zip/jszip": {
"deps": [],
"exports": "JSZip"
},
"zip/jszip-load": {
"deps": ["zip/jszip"],
"exports": "JSZip"
},
"zip/deflate": {
"deps": ["zip/jszip"],
"exports": "JSZip"
},
"zip/inflate": {
"deps": ["zip/jszip"],
"exports": "JSZip"
}
I'm using r.js to create a one file script for my application using the following command:
r.js -o ./scripts/require.build.json baseUrl=public/js/ name=main out=main.min.js
were require.build.json has the following options:
{
"paths": {
"jquery": "plugins/jquery.1.8.2.min",
"underscore": "plugins/underscore.1.4.2.min",
"backbone": "plugins/backbone.0.9.2.min"
},
"shim": {
"backbone": {
"deps": ["jquery", "underscore"],
"exports": "Backbone"
},
"underscore": {
"exports": "_"
}
}
}
my main file is just a simple test case:
/*jslint browser: true */
/*global define: false*/
define(function (require) {
"use strict";
var $ = require("jquery"),
Backbone = require("backbone");
window.console.log($);
window.console.log(Backbone);
});
I wonder, how can I avoid r.js from minifying the already minified files of my dependencies (jQuery, Underscore and Backbone) to save time?