# Getting started with systemjs full (ok)
**Hai cách load module ngoài trình duyệt dễ nhất :)**
```javascript
export const helloWorld = () => {
console.log('Hello world 123!');
};
```
C:\Users\Administrator\Desktop\amd-dependencies\helloWorld.js
```javascript
import { helloWorld } from './helloWorld.js';
helloWorld();
```
C:\Users\Administrator\Desktop\amd-dependencies\index.js
```html
Document
```
C:\Users\Administrator\Desktop\amd-dependencies\test.html
**Hoặc**
```html
Document
```
C:\Users\Administrator\Desktop\amd-dependencies\test.html
Đọc ở bài bên dưới
## systemjs-features
### [basic-import-map](https://systemjs.github.io/systemjs-examples/systemjs-features/basic-import-map/)
C:\Users\Administrator\Desktop\practice\index.html
```html
Basic SystemJS Example
```
C:\Users\Administrator\Desktop\practice\mercury.js
```javascript
System.register([], function (_export, _context) {
return {
execute: function () {
document.body.appendChild(Object.assign(document.createElement('p'), { textContent: "Mercury is the planet nearest to the sun" }))
/* The doAlert function is exported and can be used like this:
System.import('mercury').then(mercuryModule => {
mercuryModule.doAlert();
})
*/
_export('doAlert', doAlert);
function doAlert() {
alert("I hear it's quite warm on Mercury");
}
}
}
})
```
### [dynamic-import](https://systemjs.github.io/systemjs-examples/systemjs-features/dynamic-import/)
C:\Users\Administrator\Desktop\practice\index.html
```html
SystemJS Dynamic Import Example
```
C:\Users\Administrator\Desktop\practice\neptune.js
```javascript
System.register([], function (_export, _context) {
return {
execute: function() {
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: 'Neptune is a planet that revolves around the Sun'
}));
// Dynamic import within a module calculates a url relative to the current module
_context.import('./triton.js').then(function (triton) {
console.log("Triton was discovered on", triton.discoveryDate);
});
}
};
});
```
C:\Users\Administrator\Desktop\practice\triton.js
```javascript
System.register([], function (_export, _context) {
return {
execute: function() {
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: 'Triton is a moon that revolves around Neptune.'
}));
_export("discoveryDate", "Oct. 10, 1846");
}
};
});
```
### [import-map-scopes](https://systemjs.github.io/systemjs-examples/systemjs-features/import-map-scopes/)
C:\Users\Administrator\Desktop\practice\index.html
```html
Import Map Scopes SystemJS Example
Check browser console for details
```
C:\Users\Administrator\Desktop\practice\main\main.js
```javascript
System.register(['dep'], function (_export) {
let dep;
return {
setters: [
function (ns) {
dep = ns;
}
],
execute: function () {
console.log('main is executing. dep version is', dep.version);
_export('default', 'main');
}
}
})
```
C:\Users\Administrator\Desktop\practice\dep-v1.js
```javascript
System.register([], function (_export) {
return {
execute: function () {
_export('version', 'v1');
}
};
});
```
C:\Users\Administrator\Desktop\practice\dep-v2.js
```javascript
System.register([], function (_export) {
return {
execute: function () {
_export('version', 'v2');
}
};
});
```
### [nodejs-loader](https://systemjs.github.io/systemjs-examples/systemjs-features/nodejs-loader/)
C:\Users\Administrator\Desktop\nodejs-loader\main.js
```javascript
const url = require('url');
const { System, applyImportMap, setBaseUrl } = require('systemjs');
// Setting base URL is optional - the default is to use process.cwd()
// so the code here is redundant
const basePath = url.pathToFileURL(process.cwd()).href;
setBaseUrl(System, basePath);
applyImportMap(System, {
imports: {
"antarctica": "./antarctica.js"
}
});
System.import('antarctica').then(ns => {
console.log('antarctica module', ns);
});
```
C:\Users\Administrator\Desktop\nodejs-loader\antarctica.js
```javascript
System.register([], (_export) => ({
execute() {
_export('default', "Antarctica is the southern continent");
}
}));
```
C:\Users\Administrator\Desktop\nodejs-loader\package.json
```json
{
"name": "nodejs-loader",
"version": "1.0.0",
"description": "This example shows SystemJS running in the browser.",
"main": "main.js",
"scripts": {
"start": "node main.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"systemjs": "latest"
}
}
```
## loading-dependencies
### [amd-dependencies](https://systemjs.github.io/systemjs-examples/loading-dependencies/amd-dependencies/)
C:\Users\Administrator\Desktop\amd-dependencies\index.html
```html
AMD Dependencies - SystemJS Example
```
C:\Users\Administrator\Desktop\amd-dependencies\package.json
```json
{
"name": "amd-dependencies",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src --out-dir lib --plugins=@babel/plugin-transform-modules-systemjs"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.7.5",
"@babel/core": "^7.7.5",
"@babel/plugin-transform-modules-systemjs": "^7.7.4"
}
}
```
C:\Users\Administrator\Desktop\amd-dependencies\src\titan.js
```javascript
import { of, from } from 'rxjs';
of("Saturn").subscribe(
planet => {
document.body.appendChild(Object.assign(
document.createElement('p'),
{textContent: `Titan is a moon orbiting ${planet}.`}
))
}
)
const titanFacts = [
"Titan is 50% more massive than Earth's moon, and 80% more massive.",
"Titan is the only moon known to have a dense atmosphere, and the only known body in space, other than Earth, where clear evidence of stable bodies of surface liquid has been found."
];
from(titanFacts).subscribe(
fact => {
document.body.appendChild(Object.assign(
document.createElement('p'),
{textContent: fact}
))
}
);
```
C:\Users\Administrator\Desktop\amd-dependencies\lib\titan.js
```javascript
System.register(["rxjs"], function (_export, _context) {
"use strict";
var of, from, titanFacts;
return {
setters: [function (_rxjs) {
of = _rxjs.of;
from = _rxjs.from;
}],
execute: function () {
of("Saturn").subscribe(planet => {
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: `Titan is a moon orbiting ${planet}.`
}));
});
titanFacts = ["Titan is 50% more massive than Earth's moon, and 80% more massive.", "Titan is the only moon known to have a dense atmosphere, and the only known body in space, other than Earth, where clear evidence of stable bodies of surface liquid has been found."];
from(titanFacts).subscribe(fact => {
document.body.appendChild(Object.assign(document.createElement('p'), {
textContent: fact
}));
});
}
};
});
```
### [webpack-externals](https://systemjs.github.io/systemjs-examples/loading-dependencies/webpack-externals/)
C:\Users\Administrator\Desktop\webpack-externals\index.html
```html
Webpack Externals - SystemJS Example
```
C:\Users\Administrator\Desktop\webpack-externals\package.json
```json
{
"name": "webpack-externals",
"scripts": {
"build": "webpack"
},
"license": "MIT",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"dependencies": {}
}
```
C:\Users\Administrator\Desktop\webpack-externals\webpack.config.js
```javascript
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, 'src/entry.js'),
mode: 'development',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'system',
},
devtool: 'sourcemap',
plugins: [new CleanWebpackPlugin()],
// Webpack externals will be shared across bundles and come from the import map and systemjs
externals: ['vue', 'vue-router'],
};
```
C:\Users\Administrator\Desktop\webpack-externals\src\entry.js
```javascript
import Vue from 'vue';
console.log('Vue', Vue);
const App = Vue.default.extend({
template: '