I started investigating jspm and stumbled across this issue.
I seriously search all over Google but could not find a simple answer or example.
How do you load CSS and fonts that come with it?
I tried to do <script>System.import('font-awesome/css/font-awesome.css')</script> but it does not work. It adds .js extension to the url and I get a 404. like this: font-awesome.css.js
I tried import 'font-awesome/css/font-awesome.css'; which does not work either.
So, for a jspm packages that contain css and fonts, how do you make them available to my application?
And what about the font files? Do I have to move them manually or get gulp to do it? How do you handle this in your jspm workflow?
Thanks
EDIT
Based on the given answer by Joy, I just want to clarify what I want.
Investigating jspm I read about its ability to dynamically load modules (aka es6 module loading). This, I believe, is the crux of jspm. I don't want to bundler every time I change a file! I want to bundle once at the end of the development just before I upload the app to the server. During the development cycle I want jspm to dynamically load my js modules and assets. Otherwise, if bundling is required, I can just use already available (and much faster bundling solutions) like Browseryfy, Webpack. So bundling at every file change is not a solution. With Systemjs and HTTP/2 we should not need to bundle at all ever. And this, I thought, what the jspm was all about.
So can someone tell me if it is possibly to load assets (css, fonts, images) dynamically with jspm the same way it loads js modules? The key word here is dynamically without bundling first. If yes - how?
Before you using font-awesome package, you need the CSS loading plugin and CSS build support.
$ jspm install css
$ jspm install npm:clean-css --dev
$ jspm install font-awesome
And create the main.js file which contains:
import 'font-awesome/css/font-awesome.min.css!';
Until now, you have two options that make them available.
(1) The first solution in index.html file is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('main');
</script>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
You don't need to bundle all js file here. Import the main.js file only.
(2) Second solution is use jspm bundle-sfx
You can build a build.js by
$ jspm bundle-sfx main.js ./build.js
or gulp to automatically build the bundle file.
Here is a simple gulpfile.js example:
const gulp = require('gulp');
const gulp_jspm = require('gulp-jspm');
const paths = {
main: './main.js',
dest: './dest/'
};
gulp.task('scripts', function () {
gulp.src(paths.main)
.pipe(gulp_jspm({
selfExecutingBundle: true
}))
.pipe(gulp.dest(paths.dest));
});
function reportChange(event){
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}
gulp.task('watch', function () {
gulp.watch([paths.main], ['scripts']).on('change', reportChange);
});
gulp.task('default', ['watch', 'scripts']);
Now, create a index.html file and can test it by httpster
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./dest/main.bundle.js"></script>
<i class="fa fa-camera-retro"></i> fa-camera-retro
</body>
</html>
Check the jspm-cli/docs/plugins.md to get more informations.
load it with css plugin.
jspm install css
jspm install fontawsome=github:FortAwesome/Font-Awesome
in the js file
import fontawsome from 'fontawsome/css/font-awesome.css!';
Related
I was just going through this library HERE (glide.js) , as i was checking the package.json file i see the following command under the key scripts:
"build:esm": "rollup --config build/esm.js && rollup --config build/esm.modular.js",
What exactly is this script doing ? I know a a config file is being passed to rollup.js here, but whats with the .esm ? when i see the dist/ folder i also see a glide.esm.js file , what exactly is this file doing ?
The build config file for esm looks like below:
import build from './build'
export default Object.assign(build, {
input: 'entry/entry-complete.js',
output: Object.assign(build.output, {
file: 'dist/glide.esm.js',
format: 'es'
})
})
But i don't quite understand what the format: 'es' really means here. Basically to break it down , what is the difference between the glide.js and the glide.esm.js file in the dist/ folder ?
format: 'es' tells rollup that it should output the bundle in an ECMAScript Module aware way. This means that it should create a bundle that can be imported using something along the lines of:
import Glide from "some/place/glide/is/hosted/glide.js
If the context that this script is used in is not ESM aware, you will get syntax errors. In that case, it makes more sense to use a UMD rollup bundle because it is the most compatible version of the bundle.
Explaining UMD in depth is beyond the scope of this question, but suffice it to say that it makes the bundle able to work with AMD and CommonJS aware loaders as well as populating a global namespace with the bundle's exports.
Additionally, for browsers that do not understand what ES modules are or would throw syntax errors if they tried to parse them, you can include a fallback script that would leverage the UMD or bundle of another format using a script of form: <script src="some/non/esm/script.js" nomodule="true" /> which would tell an ESM aware context that it shouldn't run the linked script.
Concrete Example
Consider the following snippet which should work in Firefox and Chrome since they support ESM modules. Stack Overflow snippets do not have a way to load modules so you will need to put together a small project using the following code:
demo.js
import Glide from "https://unpkg.com/#glidejs/glide#3.2.3/dist/glide.esm.js";
new Glide(".glide").mount();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Module Demo</title>
<link rel="stylesheet" href="https://unpkg.com/#glidejs/glide#3.2.3/dist/css/glide.core.min.css" />
<link rel="stylesheet" href="https://unpkg.com/#glidejs/glide#3.2.3/dist/css/glide.theme.min.css" />
<script type="module" src="demo.js"></script>
</head>
<body>
<main>
<div class="glide">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="glide__slide">Foo</li>
<li class="glide__slide">Bar</li>
<li class="glide__slide">Fizz</li>
</ul>
</div>
</div>
</main>
</body>
</html>
I am new to reactjs and trying to install babel to run babel code without serving HTTP file. By following the Package Manager I have installed it with browserify as:
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify ] main.js -o bundle.js
After it I created the file .babelrc in the same root directory with following code
{ "presets": ["react"] }
And removed the HTTP babel-core source file as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- removed https://npmcdn.com/babel-core#5.8.38/browser.min.js -->
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
</script>
</body>
</html>
but when I access it from http://localhost/react/ this doesn't work.
You haven't included the code that's failing or the error message, so this is a guess.
The problem is that when you run browserify, it transpiles (converts) the code you specify from ES2015 to plain old Javascript. So, when you do this:
browserify -t [ babelify ] main.js -o bundle.js
You're converting the code in main.js and writing it to bundle.js.
So there are two problems with your code:
you never include bundle.js in your HTML file. You need to add <script src="build/bundle.js"></script> to load the code that you transpiled.
the code in your HTML <script> block is not touched by browserify. Your build step (running browserify) is working on scripts, not on HTML files. So that code never gets transpiled and fails when the browser tries to execute it.
The reason it works when you include babel-core in the HTML is because Babel has a special "live" transpilation mode which will transpile your code when the page is loaded, and this mode DOES get the code in the <script> block because it's all running on the user's browser.
I use bower to require my fronted css/js dependencies, I referenced all of them from my index.html view which also include my react app bundle in this html.
For the bundle.js of my react app everything is OK and webpack does the job well.
My question is how can I automate the process of combining all the style import from bower_component directory using webpack (css + js) ?
Does a tool can go throw the index.html file and then when see the import (which in my case is something like this :
<link rel="stylesheet" href="/public/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/public/plugins/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="/public/plugins/summernote/dist/summernote.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="/public/plugins/ion.rangeslider/css/ion.rangeSlider.skinFlat.css">
<script src="/public/plugins/summernote/dist/summernote.min.js"></script>
replace the content of the file using the URL of the file, moreover even if the URL is relative and defined static in expressJS.
Gulp can be the tool but it would be great if one tool can do all the job.
Gulp inject seems interesting https://www.npmjs.com/package/gulp-inject but no options for relative URL and to take only the file required in the index.html file.
I cannot use gulp and say all the js/css in the bower component because they are not all used and I don't want to more them to be able to update the component easily.
I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.
Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker
I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
I'm beginning to evaluate javascript module tools like RequireJS for javascript modularization. This seems useful, especially during development, so I don't need to recompile all of the js files into mylib-<version>.js whenever I change one of the dependent files.
My app is distributed with both html and javascript files, and in production, I would like to use the compiled version of the javascript file.
So in development, my html file might look something like
<html>
<head>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
</html>
But in production, I would expect it to look more like
<html>
<head>
<script src="mylib-1.0.js"></script>
</head>
</html>
I wouldn't think it production that there should be any need to reference requirejs if I am distributing a compiled file.
Is there a way to do this without having to manually change my html files before I distribute the app?
RequireJs has an optimization tool, which can help you to minify and concatenate your modules. It has a lot of options, and can be difficult to use, but it gets easier with a build tool like GruntJs or (especially) Yeoman, which uses GruntJs to build.
In both you can use the rjs task (which optimizes modules), but again Yeoman is a bit easier since it has generators which will configure it already for you:
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
In the index.html you just use a comment line to specify which js files should be minified/concatenated to which output file:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
In the example above, the modules will be concatenated to ONE file, named amd-app.js.
Edit:
This will be done by executing grunt from the command line. This will start a lot of useful tasks, which will build the project in a dist folder, but again this is highly adaptable.
The resulting index.html file (in dist) has only (if you want) one javascript file:
<script src="scripts/15964141.amd-app.js"></script>
My advice: use Yeoman to make life easier (at least for handling minification/concatenation).
First you have to compile your depency tree into one file using the r compiler. After that you can a striped down AMD loader like almond. At least you have to find a way to change the url in your index html.
Take a look at gruntjs which can automatize the whole thing, there a bunch task to like usemin that helps you with the process.