es6-modules | 易学教程

How do I utilize dot notation when rendering components?

阅读更多关于 How do I utilize dot notation when rendering components?

问题 I have a simple component which is supposed to render different kind of fields into my form component: import React from "react"; export default class Field extends React.Component { render() { switch (this.props.type) { case 'textarea': { return ( <div className="col-xs-12"> <textarea placeholder={this.props.placeholder} name={this.props.name} > </textarea> </div> ) } case 'text': { return ( <div className="col-md-6 col-lg-4"> <input type="text" placeholder={this.props.placeholder} name=

Running tests .mjs / ESM on Node using Jasmine or any other alternative

阅读更多关于 Running tests .mjs / ESM on Node using Jasmine or any other alternative

问题 My Node-based project is implemented using native ES module support on Node thanks to the --experimental-modules CLI switch (i.e. node --experimental-modules ). Obviously, when I run a spec using Jasmine node --experimental-modules ./node_modules/jasmine/bin/jasmine I get the following error: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module Is it ever possible to use Jasmine using ES modules in Node? If not, is there any alternative to don't use a framework (e.g. running tests with

es6 module import of d3 4.x fails

阅读更多关于 es6 module import of d3 4.x fails

问题 TL;DR: The documented way to import d3 into es6 modules fails. What is the correct way to do this? My guess is the documentation assumes I use a workflow that resolves these problems Details: The readme for d3 4.x says: D3 is written using ES2015 modules. Create a custom bundle using Rollup, Webpack, or your preferred bundler. To import D3 into an ES2015 application, either import specific symbols from specific D3 modules: import {scaleLinear} from "d3-scale"; Or import everything into a

Jest mocking default exports - require vs import

阅读更多关于 Jest mocking default exports - require vs import

问题 I have seen questions referring to the mocking of default exports with jest around here, but I don't think this has already been asked: When mocking the default export of a dependency of a module that is being tested, the tests suite fails to run if the module imports the dependency with the ES6 import statement, stating TypeError: (0 , _dependency.default) is not a function It succeeds, however, if the module uses a require().default call instead. In my understanding, import module from

ES6 modules in extensions in Chrome version 61

阅读更多关于 ES6 modules in extensions in Chrome version 61

问题 This is not the same question as ES6 Modules In Google Chrome Extension Development (unexpected token) as that is both outdated and already answered. Google produced a news release claiming Chrome supports ES6 modules. I am trying to load a module from within an extension. I am able to load a module from within a normal page, but not from within an extension. Here is the html, this is a page in an extension context: <script src="test.js" type="module"></script> When I open the page, I see the

How to import Firebase Firestore into a create-react-app project using ES6 syntax

阅读更多关于 How to import Firebase Firestore into a create-react-app project using ES6 syntax

I'm having trouble getting Firebase Firestore to work with the basic create-react-app boilerplate. Does anyone have a working sample? The Get Started doc only explains how to set it up with require statements, whereas I'd like to use ES6 imports. const firebase = require("firebase"); // Required for side-effects require("firebase/firestore"); What is the ES6 equivalent of require('firebase/firestore') ? This worked for me: import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/datastore'; From https://github.com/firebase/reactfire#using-the-firebase-js-sdk-in-react My

How do you build, bundle & minify ES6-modules?

阅读更多关于 How do you build, bundle & minify ES6-modules?

Due the fact, that ES6-modules (JavaScript-modules) are available for testing: https://www.chromestatus.com/feature/5365692190687232 https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7 I wonder, how should I minify and prepare the project release-file? Earlier, I havde bundled all JavaScript-files into the single and minified file, except situations, where I have to load the JS-file dynamically via XHR or Fetch API. As I understand, it's rather impossible to prepare a single-minified file with the ES6-modules right now or may be, I'm just misunderstanding some ways of

Is it possible to import a group of images as an array? (create-react-app project)

阅读更多关于 Is it possible to import a group of images as an array? (create-react-app project)

Is it possible to import a group of images as an array? (create-react-app project) like written below but as a single-line? import Hat1 from '../../assets/img/accesories/hats/hat1.png'; import Hat2 from '../../assets/img/accesories/hats/hat2.png'; import Hat3 from '../../assets/img/accesories/hats/hat3.png'; import Hat4 from '../../assets/img/accesories/hats/hat4.png'; import Hat5 from '../../assets/img/accesories/hats/hat5.png'; import Hat6 from '../../assets/img/accesories/hats/hat6.png'; const hatsArr = [ Hat1, Hat2, Hat3, Hat4, Hat5, Hat6 ]; You can't directly import them as an array but

Import from node_modules not recognized in es6 modules in browser

阅读更多关于 Import from node_modules not recognized in es6 modules in browser

I'm trying to use lodash in my web application. I have installed lodash using npm in my local project. I plan on using the ES6 modules in my code. Here is my main.js file: import * as _ from "lodash"; _.each([1, 2, 3, 4], (i) => { console.log('index each ' + i); }); And I have included it in index.html as: <script src="js/main.js", type="module"></script> But I get the following error in the browser console. Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../". Note: I do not wish to use any bundling tool. If you don't

Jest: How to mock default export Component when same module also has named export?

阅读更多关于 Jest: How to mock default export Component when same module also has named export?

I have an ES6 module that exports a React Component class by default, but also exports a plain JS function as a named export. When testing other packages that use this module, I want to mock both the default exported component and named exported function to keep my unit tests pure. The module looks something like this: import React, { Component } from 'react'; export default class MyComponent extends Component { render() { return <div>Hello</div> } } export function myUtilityFunction() { return 'foo' }; I would like to use the following syntax to mock the exports: import React from 'react';