I have an auto-generated file that uses RequireJS. However, I am using this file in a project that uses the ES2015 import with Webpack. The objects that are being imported are exposed globally.
define(["ace/lib/oop", "ace/mode/text", "ace/mode/text_highlight_rules"], function(oop, mText, mTextHighlightRules) {
// I only want to expose the logic within this scope
}
Is it possible to tell Babel to ignore these import statements for this specific file?
Also, I have found a module that converts RequireJS syntax to ES2015 syntax. If the answer to the first question is no, would it be possible to ignore ES2015 import statements:
var oop = require('ace/lib/oop');
var mText = require('ace/mode/text');
var mTextHighlightRules = require('ace/mode/text_highlight_rules');
Any imports from the ace module can be ignored as they are defined globally.
Thanks!
Related
I am developing a website in TS in which I have to call an unofficial API, that is https://www.npmjs.com/package/reverso-api.
The whole module is written in JS, and as described in the docs, the proper way to import the module in JS is
const Reverso = require('reverso-api');
const reverso = new Reverso();
Unluckily, I am developing in TypeScript. I have no idea how to import the module in my project in order to make it works. How can I do that?
If this package doesn't have a type definition, you can use a temporary shorthand declaration so TypeScript won't yell at you. This makes all imports from reverso-api have any type, which you might have guessed is not very safe, but it's all we have right now.
declare module 'reverso-api';
Reference: https://www.typescriptlang.org/docs/handbook/modules.html#shorthand-ambient-modules
I was working with an ES6 class-based file I developed but because of compatibility issues with IE11, I had to use RollupJS to transpile the class-based file to an Immediately Invoked Function Expression, the problem with that is that in the root index.js file, the class-based file was instantiated like so:
import { XCode } from './Library/Transform/xcode-es6.js';
import * as uIHandler from './Library/Transform/UIHandler.js'
try {
const handler = new uIHandler();
const sdk = XCode();
sdk.setHandler(handler);
}
We are getting an error where it cannot find the uIHandler, I believe the problem is not with the import statement up top, but that we can no longer instantiate an IIFE type file. If I am correct, what would the solution be here? I have very limited experience with IIFE.
You need to apply RollupJS to the entire program, and not just pieces of it.
It has converted UIHandler.js so it is no longer an ES6 module, so you can't treat it as one any more.
I'm trying to use import and export to create modules and it's not working.
I added https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js to the index.html header and tried to import a js file and get an error message saying SyntaxError: import declarations may only appear at top level of a module. What can I possibly be doing wrong?
I know I can use require.js but rather use import and export.
HTML
script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script
JS File
import Mymodule from './modules/mymodule';
Babel cannot perform client-side transpiling of modules, or rather it is not universally supported by browsers. In fact, unless you use a plugin, Babel will transform import into require().
If I run the following code:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script defer type="text/babel" data-presets="es2015">
import Mymod from './modules/module';
Mymod();
</script>
</head>
I get the following error:
Uncaught ReferenceError: require is not defined
From Babel Docs:
Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side. See setup build systems for more information.
Most people choose a pre-compiled module bundler like Webpack or Rollup.
If you really want to perform this client-side, use RequireJS with Babel run via a plugin, though you may need to use AMD syntax.
Native browser support for ES6 modules is still in early stages. But to my knowledge there isn't a preset/plugin available yet for Babel to tell it not to transform import/export statements.
The scripts that babel-standalone translates execute by default in global scope, so any symbols defined by them are automatically available to every other module. From that perspective, you don't need import/export statements in your modules.
However, you might be trying to maintain source files that can be used both by babel-standalone (e.g. for quick test environments, feature demonstrations, etc) and via bundlers such as webpack. In that case, you need to keep the import and export statements there for compatibility.
One way to make it work is to add extra symbols into the global scope that cause the import and export code that babel generates to have no effect (rather than causing an error as usually occurs). For example, export statements are compiled into code that looks like this:
Object.defineProperty (exports, "__esModule", {
value: true
});
exports.default = MyDefaultExportedClass;
This fails if there is no existing object called "exports". So give it one: I just give it a copy of the window object so anything interesting that gets defined is still accessible:
<script>
// this must run before any babel-compiled modules, so should probably
// be the first script in your page
window.exports = window;
import statements are translated to calls to require(). The result (or properties extracted from it) is assigned to the variable used as the identifier in the import statement. There's a little bit of complication around default imports, which are different depending on whether or not the result of require() contains the property __esModule. If it doesn't, things are easier (but then you can't support having both default and named exports in the same module ... if you need to do this, look at the code babel produces and figure out how to make it work).
So, we need a working version of require(). We can provide one by giving a static translation of module name to exported symbol/symbols. For example, in a demo page for a React component, I have the following implementation:
function require (module) {
if (module === "react") return React;
if (module === "react-dom") return ReactDOM;
}
For a module returning multiple symbols, you'd just return an object containing the symbols as properties.
This way, a statement like
`import React from "react";`
translates to code that is effectively:
`React = React;`
which is roughly what we want.
I have a working ES2015 project, which I would like to migrate to TypeScript.
In my solution I am using ES2015 imports to import 3rd-pary modules (installed via npm) like this:
import {ClassXY} from 'moduleXY'
After setting up TypeScript in my project, the TypeScript compiler reports the following error:
error TS2307: Cannot find module 'moduleXY'
How can I get the above ES2015 import statement working in TypeScript?
I am looking for a solution other than installing the corresponding .d.ts declarations via typings... let's assume the module moduleXY is a library that does not distribute its own .d.ts declarations and there are no declarations available on DefinitelyTyped (or the declarations are outdated).
Must I create a stub for the type definitions of module moduleXY? How would I do that with minimal effort?
if there are no typings for a module then you can just
require it like a regular commonjs module
declare require:any;
const moduleXY:{
classXY:any
} = require("moduleXY");
in a .ts file and make sure that file is included with your source in the Typescript compiler. you don't need to fully declare the module, and you will still benefit in places where you start adding types moving forward.
I really don't know how to do this and not sure how to google either.
Right now I have this
let source = require('vinyl-source-stream');
I would like to change to be import but this doesn't work
import {'vinyl-source-stream' as source} from 'vinyl-source-stream';
If that module even supports the ES6 import/export system, then what you want is this:
import source from 'vinyl-source-stream';
Your version is attempting to import an exported value named vinyl-source-stream from the module; instead, you just want the module itself to be imported (into an object named source in this case).
If you want everything in the module imported, instead of just the default exports, use this instead:
import * as source from 'vinyl-source-stream';
But neither of those will work if the module isn't actually written to use the new system.
This library doesn't use the ES2015 module system. It doesn't export at all, so you can't import it or from it.
This library uses the CommonJS module pattern (as can be seen in the source) and is meant to be requireed.
You could import the library with:
import form 'vinyl-source-stream';
which will cause the code to be executed, but that will be useless in this case since nothing (useful) will happen - in fact, you'll probably get a runtime exception due to undefined module.