I would like to use Javascript generators on client code (and other ES6 features), but AFAIK it's not yet implemented in all major browsers yet or enabled by default. So I found traceur.
But I'm having trouble with Meteor integration. Traceur provides a command line compiler, which I could call as meteor-typescript (even if it's not recommended), because I couldn't find documentation about compiling a string from Javascript with traceur.
Then, I guess a runtime dependency is also required and has to be served to the client. Can I use bower for that?
Thanks in advance for any suggestions or pointers.
Edit: I could call the compiler (see my meteor-traceur), but I don't know how to add the runtime dependency. Traceur defines a RUNTIME_PATH, but I can't use it with api.add_files because the npm module isn't imported inside package.js (where Packages.on_use should be defined).
The npm depencies are installed in the .npm directoy in the package. You can add the traceur runtime by adding this to package.js:
Package.on_use(function (api) {
api.add_files(".npm/plugin/compileTraceur/node_modules/traceur/bin/traceur-runtime.js");
});
I forked your repository and fixed this: https://github.com/Sanjo/meteor-traceur
I also created a demo app: https://github.com/Sanjo/meteor-traceur-demo
Related
In my project I need to use the npm module ipfs-api with create-react-app.
I can run npm start and run the proect.
But when I try to build the proect with react-scripts build, it throws the following error
Failed to compile.
Failed to minify the code from this file:
./node_modules/ipfs-api/src/utils/module-config.js:7
Read more here: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
According to the suggestions in the provided link in eorror log, I tried using,
"dependencies": {
...
"ipfs-api": "github:atfornes/js-ipfs-api#transpiled",
...
}
instead of "ipfs-api": "^22.0.0",. Although this solved error for ipfs-api, other dependent modules (probably installed with ipfsapi) kept giving same type of Failed to minify errors which I stopped transpiling them manually.
Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ? Or any other way to overcome this issue?
Usually client-side or platform independent packages are compiled to ES5 on publishing. That you have this problem may suggest that the package isn't intended for client side.
As the documentation explains, the package contains a bundle for browsers that includes polyfilled Node features (streams, etc.) that are needed to run it on client side.
It's supposed to be used as a global:
import 'ipfs-api/dist';
ipfs(...)
Is there a way to transile all the dependent node modules to es5 while before using the command react-scripts build ?
This would require to eject create-react-app configuration and configure Webpack to transpile this package properly. This example from the documentation shows how Node-specific parts should be configured to bundled for browsers.
I've build an UI component using react/ES6 and I need to reuse it for several other projects.
So I thought it could be a nice little npm package.
Turns out the default for npm packages seems to be:
Put ES6 modules under /src
Have a separate /lib where the transpiled files live
On every release transpile those modules to ES5
From my point of view this is some (needless?) overhead. The projects that will use the package will be written using ES6 as well, so there is no need to transpile the dependency.
Is there any way to bundle ES6 modules in an npm package and skip the transpile process - and accept the fact that projects need to use ES6 in order to to add this dependency?
Edit to clarify
#D-reaper right, fair enough. My problem is the importing side. I've build a package that includes Project.jsx. When attempting to import it I get the following error message:
ERROR in ./node_modules/foo/Project.jsx
Module parse failed: /../node_modules/foo/Project.jsx Unexpected token (14:11)
You may need an appropriate loader to handle this file type.
So my guess is, that webpack/babel can't handle the import of ES6 modules correctly, since they expect npm packages to include ES5 - is that a correct assumption? Can I work around that?
I will use https://github.com/insin/nwb to put my react components into npm packages.
why don't you try Bit as to share your components. You can use bit's compilers or your owns if you have custom use case. You can read a little more https://codeburst.io/start-using-bit-to-build-react-apps-like-lego-7e14920f8de2
I have a project built in WebStorm 2016.2.2, Node.js 6.6.0 and TypeScript 1.8.
For some reasons, which are specified here: ES6 import and export are not supported in Node.js, I need to use Babel.
I have installed Babel and babel-preset-es2015 and I have added a file watcher, but I'm still getting an "unexpected token import" error. It looks like babel doesn't work.
1) Do I need to take an additional action in order to transpile my js files to ES5?
2) What version of ES should I set the "JavaScript language version" to in WebStorm settings?
3) Is Babel supposed to generate another file with the output as TypeScript compiler does?
Any help will be profoundly appreciated!
here are the Babel file watcher settings that work for me:
Arguments: $FilePathRelativeToProjectRoot$ --out-dir $ProjectFileDir$/dist --source-maps --presets es2015
Working directory: $ProjectFileDir$
Output Paths to Refresh: $ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/dist/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js.map
it compiles files to separate directory, preserving original file names, so that require() work; also, WebStorm is aware of generated files, as file system is correctly refreshed once the compilation completes
1) Create a file called .babelrc in the root directory of the project, with the following content:
{
"presets": ["es2015"]
}
It is not enough to install the es6 preset, you have to tell babel to use that preset. For reference: https://babeljs.io/docs/plugins/preset-es2015/
2) Try setting ECMAScript6
Do not use babel-preset-es2015 for Node.js 6. This will transform your sources to ES5, whilst you already have 97% support for ES6 natively, causing severe performance penalties. Merely adding it doesn't enable module transformation either.
Use the babel-preset-node6 preset or just add the transform-es2015-modules-commonjs plugin.
I have a sample code and saved it to a file such as hello.ts
After installing nodejs on windows use below command for installing typescript
npm install -g typescript
How can I compile hello.ts with node.js directly?
When I install "TypeScript 1.6 in VS2015" and use tsc.exe don't have any problem but I want to use node.js instead of VS 2015 extension
Please guide me generate .js and .ds through Node.js
Run tsc in the command line, you'll have the help page. Compiling a script is easy, just tsc hello.ts in the folder containing your script, you'll get a hello.js file.
Please guide me generate .js and .ds through Node.js
You have two options:
Run tsc.js as a node script
Use typescript as an npm module
Run node tsc.js
This is the approach taken by some tools e.g grunt-ts. You basically just call spawn on the current process process.execPath passing in the other commands as args (-d).
One sample
Run TypeScript as a node module
If you are playing with the typescript compiler API highly recommend NTypeScript See the Readme for reasons.
The TypeScript compiler provides a simple function called transpile that you can use to get the expected output and then write it out to disk yourself.
PS: I have some docs on the TypeScript compiler internals here : https://basarat.gitbooks.io/typescript/content/docs/compiler/overview.html
My preferred way to get going is to use typescript-require.
this library basically adds nodejs support for typescript.
your index file should be a javascript file and it will look like this
require('typescript-require');
require('./src/main.ts');
and main.ts is a typescript file.
Here's a programatically way from TS/Node to run the equivalent of tsc from within a code itself (Note: this uses the TypeScript Compiler API):
https://gist.github.com/rnag/0d8fe2e72dc7b48743c13f9ca8837a4c
I would like to use jsdoc module to extract documentation entries from some source code.
I have installed jsdoc module and I can use jsdoc in the command line.
But when I require("jsdoc") in my code, nodejs throws an error saying Cannot find module 'jsdoc'.
I have nodejs v0.8.25 and JSDoc 3.3.0-alpha2. It is installed both locally and globally.
I can use jsdoc command and I have jsdoc in my node_modules folder.
I cannot see where the problem is.
Where can I find some documentation about jsdoc other than how to use it in the command line interface or how to document js source code. I would like some API documentation.
I was looking to use jsdoc as a library too, and I stumbled on the same issue as you did.
You have done nothing wrong, it was just never intended to be used as a library.
There is an issue on the jsdoc's github project page relating to this. Hegemonic, the main contributor of JSDoc said:
JSDoc isn't really designed to be used as a library
You might want to express your desire to for creating an API for nodejs on the issue linked above.
The require('jsdoc') fails because there is no main field declared in the jsdoc's package.json. It might default to 'index.js' or 'main.js', but there is no such file either.
It sounds like you haven't installed jsdoc correctly. Run npm install -g jsdoc from your command line. If you run this inside a new terminal window that's in the default directory you shouldn't have any problems. I've had issues where I've tried to install a node module globally from my current working directory and for whatever reason the module doesn't install globally.
If it is about an automatic documentation tool in general, you could also use YUIDoc.
Following these three steps, you will have your automatic documentation:
Installing it: npm -g install yuidocjs
Format your comments regarding the YUIDoc Syntax Reference
In your console run yuidoc . on top of your JS source tree