es6-modules

Wildcard or asterisk (*) vs named or selective import es6 javascript

由 ℡╲_俬逩灬. 提交于 2019-11-29 01:07:30
Just wondering which one is the best way to use import: import * as Foo from './foo'; VS: import { bar, bar2, bar3 } from './foo'; In terms of efficiency, say for example, I'm using webpack for bundling all the JavaScript files. Will the first one actually importing everything even though I'm not using them in the main code? Some references that I can find are: In Airbnb style guide , they are recommending no wildcard so there will always be default import object, and this . If you use webpack with the dead code elimination provided by the new uglify, or rollupjs with tree-shaking, then the

Cypress with SystemJS

由 我的未来我决定 提交于 2019-11-28 13:57:11
I am attempting to create some basic tests to try out the new Cypress library. In my test I have cy.visit('http://mywebsite.com'); which is loading an AngularJS app that uses SystemJS. If I understand Cypress correctly, I shouldn't have to do anything else and it will make sure the page is loaded before running anything else. However this doesn't seem to be working because the page is loaded, but SystemJS is still loading the modules. How can I get Cypress to wait for all the SystemJS modules to load before running any more tests without using cy.wait(5000) ? EDIT Thanks to Dwelle this is the

Does ES6 import/export need “.js” extension?

由 喜你入骨 提交于 2019-11-28 12:07:55
I installed chrome beta - Version 60.0.3112.24 (Official Build) beta (64-bit) In chrome://flags/ I enabled 'Experimental Web Platform features' (see https://jakearchibald.com/2017/es-modules-in-browsers ) I then tried: <script type="module" src='bla/src/index.js'></script> where index.js has a line like: export { default as drawImage } from './drawImage'; This refer to an existing file drawImage.js what I get in the console is error in GET http://localhost/bla/src/drawImage If I change the export and add ".js" extension it works fine. Is this a chrome bug or does ES6 demands the extension in

How do I concatenate ES6 modules?

由 自作多情 提交于 2019-11-28 11:54:44
How can I concatenate ES6 modules? var foo = 2; // This would normally be scoped to the module. export function Bar() {} // ...concatenate... import { Bar } from 'javascripts/bar' //This file no longer exists in the concatenated scenario. export function Bam() {} Brian Donovan If what you want to do is create a single JavaScript file that does not internally use ES6 modules, so that you can use it with browsers/node today, then I recommend using Esperanto (full disclosure, I'm a maintainer of the project). It allows you to create a bundle that concatenates all of the files together without the

Alternative for __dirname in node when using the --experimental-modules flag

由 女生的网名这么多〃 提交于 2019-11-28 07:14:09
I use the flag --experimental-modules when running my node application in order to use ES6 modules. However when I use this flag the metavariable __dirname is not available. Is there an alternative way to get the same string that is stored in __dirname that is compatible with this mode? As of Node.js 10.12 there's an alternative that doesn't require creating multiple files and handles special characters in filenames across platforms: import { dirname } from 'path'; import { fileURLToPath } from 'url'; const __dirname = dirname(fileURLToPath(import.meta.url)); There have been proposals about

How to build a single ES6 module from several TypeScript files (for a frontend library)

由 家住魔仙堡 提交于 2019-11-28 04:39:26
问题 The code of my frontend library is split into several source files. Example: // a.ts function a() {} // b.ts function b() {} // main.ts const myLib = { a: a, b: b } I need to build one ES6 module (ie. one JavaScript file) that exports only myLib , as the default export. I see two options. The first one: Run tsc to compile each file to JavaScript; Concatenate all the generated JS files into a single file my-lib.js ; Append the code needed by ES6 ( export … ). The second one: Concatenate all

Test ES6 modules with Jest

由 a 夏天 提交于 2019-11-28 04:26:35
问题 How to test ES6 modules with Jest. Example: sum.js const sum = function (a, b) { return a + b; } export default sum; sum.test.js import sum from './sum'; test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); }); 回答1: The only requirement is to config your test environment to Babel, and add the es2015 transform plugin: Step 1: Add your test environment to .babelrc in the root of your project: { "env": { "test": { "plugins": ["@babel/plugin-transform-modules-commonjs"] } } } Step 2:

How to import es6 module that has been defined in <script type=“module”> tag inside html?

由 早过忘川 提交于 2019-11-28 04:15:39
问题 I am able to define a module in my html file me.html: <script type="module" id="DEFAULT_MODULE"> import Atom from './atom.js'; console.log("definition of getAtom") export default function getAtom(){ return new Atom('atom'); } console.log("exported getAtom") </script> Also see https://blog.whatwg.org/js-modules https://github.com/whatwg/html/pull/443#issuecomment-167639239 => Is it possible to import that "anonymous" module to another module script in the same html file? Or to some "code

ES6 Modules: Undefined onclick function after import

由 时光毁灭记忆、已成空白 提交于 2019-11-27 22:49:53
I am testing ES6 Modules and want to let the user access some imported functions using onclick : test.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Module Test</title> </head> <body> <input type="button" value="click me" onclick="hello();"/> <script type="module">import {hello} from "./test.js";</script> </body> </html> test.js: export function hello() {console.log("hello");} When I click the button, the developer console says: ReferenceError: hello is not defined . How can I import functions from modules so that they are available as onclick functions? I am using Firefox

What is the difference between importing a function expression or a function declaration from a ES6 module?

由 荒凉一梦 提交于 2019-11-27 20:51:09
As I understand it ( see section 16.3.2.1 ), ES6 allows different syntaxes for function / class export operands. The difference refers to whether the exported function needs to be interpreted at import as a function declaration, in which case you write: export default function () {} // (a) or as a function expression: export default (function () {}); // (b) . As a possible related sidenote: I read that imports are hoisted, but I'm not really sure what that means in this context. Taking the case of this example: import foo from 'my_module'; // (c) As I understand it, the above statement will
订阅 es6-modules