Pulse Of The Blogosphere » JS Module – 2. ESM: Ecmascript Module Syntax

HOME / Javascript / JS Cơ Bản / JS Module – 2. ESM: Ecmascript Module Syntax

JS Module – 2. ESM: Ecmascript Module Syntax

Author: admin - Posted: 01/01/21 - Update: 01/01/21

A. Cú pháp

// Name export/import
export const name = 'value';
import { name } from '/module/my-module.js';

// Default export/import
export default 'value';
import anyName from '/module/my-module.js';

// Rename import
export { name as newName };
import { newName } from '/module/my-module.js';

// Export list + rename | Import list + rename
export { name1, name2 as newName2 };
import { name1 as newName1, newName2 } from '/module/my-module.js';

// Named export + default export | Import all module's contents
export const name = 'value';
export default 'defaultValue';
import * as anyName from '/module/my-module.js';
console.log(anyName); // Module { name: 'value', default: 'defaultValue' }
console.log(anyName.name); // 'value'
console.log(anyName.default); // 'defaultName'

// Default + Named export
export const name = 'value1';
export default 'value2';
import anyName, { name } from '/modules/my-module.js';

// Export list => không phải là object nhé
const name1 = 'value1';
const name2 = 'value2';
export { name1, name2 };

import { name1, name2 } from '/modules/my-module.js';
console.log(name1); // 'value1'
console.log(name2); // 'value2'

//Kết hợp import và export
//Thông thường
import logger from './logger.js' 
export default logger;
//Cách khác
export {default} from './logger.js'
export {default as debugger} from './logger.js'

// Name export/import

export const name = 'value';

import { name } from '/module/my-module.js';

// Default export/import

export default 'value';

import anyName from '/module/my-module.js';

// Rename import

export { name as newName };

import { newName } from '/module/my-module.js';

// Export list + rename | Import list + rename

export { name1, name2 as newName2 };

import { name1 as newName1, newName2 } from '/module/my-module.js';

// Named export + default export | Import all module's contents

export const name = 'value';

export default 'defaultValue';

import * as anyName from '/module/my-module.js';

console.log(anyName); // Module { name: 'value', default: 'defaultValue' }

console.log(anyName.name); // 'value'

console.log(anyName.default); // 'defaultName'

// Default + Named export

export const name = 'value1';

export default 'value2';

import anyName, { name } from '/modules/my-module.js';

// Export list => không phải là object nhé

const name1 = 'value1';

const name2 = 'value2';

export { name1, name2 };

import { name1, name2 } from '/modules/my-module.js';

console.log(name1); // 'value1'

console.log(name2); // 'value2'

//Kết hợp import và export

//Thông thường

import logger from './logger.js'

export default logger;

//Cách khác

export {default} from './logger.js'

export {default as debugger} from './logger.js'

B. Sử dụng

1. Sử dụng trên CDN dạng type="module"

<!DOCTYPE html>
<html lang="en">
<body>
    <script type="module">
        import {demoData} from '/demo-export.js'
        console.log(demoData);
    </script>
</body>
</html>

<!-- Tại file: /demo-export.js -->
<!-- export const demoData = {a: 2, b: 3} -->

<!DOCTYPE html>

<body>

import {demoData} from '/demo-export.js'

console.log(demoData);

</script>

</body>

</html>

2. Sử dụng trên CDN với babel version 6

Nguồn: https://stackoverflow.com/questions/53972473/how-to-perform-import-export-in-client-side-react-jsx-using-babel-standalone/53975781#53975781

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React JSX Babel-Standalone Import/Export Problem</title>
</head>

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


    <script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./MyExport.js"></script>
    <script data-plugins="transform-es2015-modules-umd" type="text/babel">
        import MyExport from "./MyExport";
        const App = () => {
            return (
                <MyExport />
            );
        };
        ReactDOM.render(<App />, document.querySelector("#root"));
    </script>

    <!-- MyExport.js:
    const MyExport = () => {
        return (
            <div>MyExport element is imported!</div>
        );
    };
    export default MyExport;
    -->
</body>

</html>

<!DOCTYPE html>

<head>

<title>React JSX Babel-Standalone Import/Export Problem</title>

</head>

<body>

import MyExport from "./MyExport";

const App = () => {

return (

);

};

ReactDOM.render(<App />, document.querySelector("#root"));

</script>

<!-- MyExport.js:

const MyExport = () => {

return (

<div>MyExport element is imported!</div>

);

};

export default MyExport;

-->

</body>

</html>

3. Sử dụng với babel 7

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>React JSX Babel-Standalone Import/Export Problem</title>
</head>

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.11.4/babel.js"></script>


    <script data-plugins="transform-modules-umd" data-presets="react" data-type="module" type="text/babel" src="./MyExport.js"></script>
    <script data-plugins="transform-modules-umd" data-presets="react" data-type="module" type="text/babel">
        import MyExport from "./MyExport";
        const App = () => {
            return (
                <MyExport />
            );
        };
        ReactDOM.render(<App />, document.querySelector("#root"));
    </script>

    <!-- MyExport.js:
    const MyExport = () => {
        return (
            <div>MyExport element is imported!</div>
        );
    };
    export default MyExport;
    -->
</body>

</html>

<!DOCTYPE html>

<head>

<title>React JSX Babel-Standalone Import/Export Problem</title>

</head>

<body>

import MyExport from "./MyExport";

const App = () => {

return (

);

};

ReactDOM.render(<App />, document.querySelector("#root"));

</script>

<!-- MyExport.js:

const MyExport = () => {

return (

<div>MyExport element is imported!</div>

);

};

export default MyExport;

-->

</body>

</html>

A. Cú pháp

B. Sử dụng

1. Sử dụng trên CDN dạng type="module"

2. Sử dụng trên CDN với babel version 6

3. Sử dụng với babel 7

JS Cơ Bản

MyClass – Những Class hay nhất của duycode.com