Working on my first TypeScript project and I am using the fetch api but I need to use a poly fill for the other browsers out there. I would like to use Whatwg-fetch from Github and I have installed the module with NPM and I have the typings file from Definitely Typed.
When the code in compiled fetch poly fill will not be included and I am not sure how to add it as any time I import Typescript errors.
I am using Grunt, Browserify, TypeScript and React.
I have tried to import with
import {fetch} from 'whatwg-fetch';
and
import fetch = require('whatwg-fetch');
The definitions are in my main tsd.d.ts file that is included on the page.
Thanks for any help or directions.
Related
I am using OpenLayers 6 and I import parts of the library using this notation:
import { Map, View } from 'ol';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
// More in other files [...]
When running npm run dev I get a 9MB file for my project.
For testing purpose, I tried to replace these named imports by default imports:
import Map from 'ol/Map';
import View from 'ol/View';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
Surprisingly, it reduced my bundled file to 6MB!
It's 33% lighter, why is that? Shouldn't named imports be importing only required parts of modules?
EDIT 1
Following #Bergi comment, the library is available here. I use the last version which is installed through npm : v6.4.2
EDIT 2
As pointed out by #felixmosh answer, running npm run prod seems to reduce the size difference. I get a difference of 1KB from 886KB to 885KB.
Tree shaking, is part of the minification process. In dev bundles this process is not applied.
Try to run in "production" mode, and compare the results.
No, it shouldn't. It very depends on how internal libs are organized.
If it uses require inside, the lib will not be shaked
If it uses import * inside and uses this package, the whole * will be included
Even! if it uses import {name} from './names' it still might not be tree-shaked
There is a good starting article about how tree shaking works and how to help it: https://webpack.js.org/guides/tree-shaking/
I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.
Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.
I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript.
I've tried
import * as revpubeditor from '../modules/revpubeditor'
import revpubeditor from '../modules/revpubeditor'
import { revpubeditor } from '../modules/revpubeditor'
and have also altered the .js file and added a .d.ts file so that it will compile and not give any errors but at runtime in the browser the revpubeditor that I have imported is not found by webpack.
How should this be setup and consumed? I am not worried about it being strongly typed I just want the webpack loader to find the module.
Hi I am creating an app on reactjs, which is canvas based, It require Createjs library, I am new for Reactjs I am not getting perfect idea how do this so I tried 2 ways one is using NPM install and other one is I kept my js into one folder and tries to import from there but nothing works for me, here my code
way 1 with npm install,
import createjs from 'createjs';
way 2 import downloaded js file,
import createjs from '../assets/js/createjsmin';
randomly I tried
import * as createjs from '../assets/js/createjsmin';
but nothing works for me
I add relative path to index.html and got Createjs library code into componentWillMount() using window.createjs, dn't know but I feel it can work to add all ramdom libraries in react.
So I made it work by installing this specific dependency
"#createjs/easeljs": "^2.0.0-beta.4",
And In my Component file I am importing them like this
import { Stage, Shape, TraceShape } from '#createjs/easeljs';
I have a TypeScript file into which I'm importing third-party libraries.
import * as _ from 'lodash'; // Works great!
import * as moment from 'moment'; // Works great!
import {vsprintf} from 'sprintf-js'; // Compiler error
As my comments explain, the first two imports work great, but the sprintf-js import does not. I get the following compiler error:
Error TS2307: Cannot find module 'sprintf-js'.
Without a doubt, I have sprintf-js inside of my node_modules folder. I'm not very knowledgeable about node modules. I'm guessing that the sprintf-js libarary does something different than lodash or moment and that TypeScript doesn't like it. How can I make this work?
You will need to add a typing definition for sprintf-js. Depending on your setup - if you have TSD installed and setup with your project, it would be a case of running:
tsd query sprintf-js --action save
otherwise, you can have a read here:
http://definitelytyped.org/
or simply download the typing definition and include it in the project root folder:
https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/sprintf-js/sprintf-js.d.ts