Skip to content

Instantly share code, notes, and snippets.

@kaleb
Last active November 9, 2017 16:40
Show Gist options
  • Select an option

  • Save kaleb/24f1e85155f9efa56a899c960f84f67f to your computer and use it in GitHub Desktop.

Select an option

Save kaleb/24f1e85155f9efa56a899c960f84f67f to your computer and use it in GitHub Desktop.

Revisions

  1. kaleb revised this gist Nov 9, 2017. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    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'}}"
  2. kaleb created this gist Nov 9, 2017.
    2 changes: 2 additions & 0 deletions .gitignore
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    /node_modules
    /jspm_packages
    15 changes: 15 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    <!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>
    10 changes: 10 additions & 0 deletions main.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    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()
    })
    });
    45 changes: 45 additions & 0 deletions package.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    {
    "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"
    }
    }
    }
    }
    }
    15 changes: 15 additions & 0 deletions system.config.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    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]"
    }
    });