| /node_modules | |
| /jspm_packages |
To run:
npm install
jspm install
npm start
I used the following to install bootstrap:
jspm install npm:[email protected] -o "{directories:{lib:'dist'},main:'js/bootstrap.bundle',shim:{'js/bootstrap.bundle':{deps:['jquery','../css/bootstrap.css!']}},dependencies:{},peerDependencies:{jquery:'^3.0.0'}}"
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Bootstrap 4 JSPM Test</title> | |
| <script src="./jspm_packages/system.js"></script> | |
| <script src="./system.config.js"></script> | |
| <script>System.import('./main.js');</script> | |
| </head> | |
| <body> | |
| <h1 id="main">Loading...</h1> | |
| </body> | |
| </html> |
| define(['bootstrap'], () => { | |
| const main = document.getElementById('main'); | |
| main.innerHTML = 'Loaded!'; | |
| main.title = 'Tooltip!!!'; | |
| main.dataset.toggle = 'tooltip'; | |
| $(function () { | |
| console.log('loaded'); | |
| $('[data-toggle="tooltip"]').tooltip() | |
| }) | |
| }); |
| { | |
| "name": "@kaleb/bs4-jspm-test", | |
| "version": "0.0.0", | |
| "description": "Bootstrap 4 JSPM Loading Test", | |
| "main": "index.js", | |
| "scripts": { | |
| "start": "lite-server", | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "Kaleb Hornsby <[email protected]> (http://kaleb.horns.by/)", | |
| "license": "UNLICENSED", | |
| "devDependencies": { | |
| "jspm": "^0.16.53", | |
| "lite-server": "^2.3.0" | |
| }, | |
| "jspm": { | |
| "configFile": "system.config.js", | |
| "dependencies": { | |
| "bootstrap": "npm:[email protected]", | |
| "css": "github:systemjs/plugin-css@^0.1.36", | |
| "jquery": "npm:jquery@^3.2.1" | |
| }, | |
| "devDependencies": {}, | |
| "overrides": { | |
| "npm:[email protected]": { | |
| "directories": { | |
| "lib": "dist" | |
| }, | |
| "main": "js/bootstrap.bundle", | |
| "shim": { | |
| "js/bootstrap.bundle": { | |
| "deps": [ | |
| "jquery", | |
| "../css/bootstrap.css!" | |
| ] | |
| } | |
| }, | |
| "dependencies": {}, | |
| "peerDependencies": { | |
| "jquery": "^3.0.0" | |
| } | |
| } | |
| } | |
| } | |
| } |
| System.config({ | |
| baseURL: "/", | |
| defaultJSExtensions: true, | |
| transpiler: false, | |
| paths: { | |
| "github:*": "jspm_packages/github/*", | |
| "npm:*": "jspm_packages/npm/*" | |
| }, | |
| map: { | |
| "bootstrap": "npm:[email protected]", | |
| "css": "github:systemjs/[email protected]", | |
| "jquery": "npm:[email protected]" | |
| } | |
| }); |