I am using jspm 0.16.2.
I am using this test project
When I set the Transpiler to none: transpiler: "none"
I get an error XHR error (404 Not Found) loading http://localhost:53404/none.js
If I set the transpiler to 'test' it gives the same error, except for it looks for test.js
Is this a bug with jspm?
I wanted to not use a transpiler, but use system.js to load AMD modules.
When I removed the transpiler option from config.js, then it tries to load Traceur.
I would like to not have a Transpiler running at runtime.
It's not clear what you're trying to do. If you use ES2015 features (e.g. ES2015 modules, let, etc.), then you need the transpiler. If you write your code with no ES2015 features, then no transpiler will be loaded. You can check this by putting ES5 code in main.js and checking the Network tab of your debugger. browser.js will not be downloaded.
The string you put in for transpiler in System.config is literally the transpiler file itself. In the case of "babel", it is mapped to npm:babel-core#5.8.3 (from map field) which when combined with the path field refers to jspm_packages/npm/babel-core#5.8.3 and then in that directory, the file .jspm.json points the entry point to browser.js, which is the client side transpiler file itself.
Whatever string you set transpiler to, jspm will set up System to point to it (the path will just be the baseURL if you haven't mapped it) and fetch it. Of course it's not there for any arbitrary string such as none or test. The default, if you don't specify anything, as you've observed is traceur.
You do have the option of transpiling server side by doing jspm bundle if client side transipling is what you're trying to avoid.
For code that uses only ES5 and AMD, without transpiling, checkout the no-transpile branch of the above repo. Note that browser.js is not downloaded even though transpile is still set to "babel".
Related
I have a slight problem with a basic Node.JS method. When I'm trying to use "require()' method to import any downloaded (with 'npm install ..) module/library, I get a Visual Studio Code message that asks 'to convert 'require'(which is a Common JS module) into ES. If I do it, it transforms 'require()' into 'import..' though I want keep using 'require()'. Why is it so ? I read somewhere that Common JS is already included in the Node.JS environment though.
Then, when trying to compile my index.js file (with 'node index.js'), I obviously get an error about 'require' not recognized method.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users...index.js from C:\Users...index.js not supported.
I tried then to install Webpack to fix this issue, but nothing change. I also kind of installed CommonJS (npm i common-js)..
Another common answer was to remove 'type':'module' from package.json file which normally should allow to use 'require', but I don't even have such a line in the file.
On top of that I've recently read that 'require' is not compatible with browser development tools (it's ok). But I'm trying to import a downloaded module/npm package in VSC terminal, not even in a browser.
As you understand I'm new to Node.JS, but I don't really get what's going on in this case...
I am trying to convert Express.js project to binary, and I am using zeit/pkg libary. However, it gave me an error every time I try to use pkg.
Is there a way that I can force Node/Npm to use es5 instead of es6.
in your snapshot the module is being imported from ..er/node_modules/safefs/es6/lib/safefs.js
notice it is importing from es6 which has export keyword. that means its an es6 module and your node supports 'commonjs' require.
which is why this require may be failing.
you can download latest version of node where you can resolve es6 modules.
So, I'm not using Node or WebPack serverside, but would still like to use modules from npm every now and then. My clientside uses requirejs, so I would need the modules in either AMD (preferred) or CommonJS.
What I want to archieve is a script that takes the module name + "external dependencies" as arguments and creates a module that contains all the other deps.
E.g.
sh npmtoamd.sh draft-js react react-dom
It creates an ES5 AMD module that contains draft-js and all of it's dependencies excluding react and react-dom. If it's not possible to eg. include css files and other non-js content in the module, providing them in eg. draft-js.css is tolerable.
While I don't use Node or Webpack serverside, we can use npm and webpack in the said script.
Fetching the module from npm is the trivial part, but I'm pretty lost in how to do the webpack parts. I know for a fact that it's possible though, as I managed to do it earlier with help, just don't have it down anywhere and no idea how it went.
I think as elmigranto commented, Browserify is what you're looking for. Unlike its name implies, it can be used in both the browser environment and the node environment. In a nutshell, it does this:
Browserify starts at the entry point files that you give it and searches for any require() calls it finds using static analysis of the source code's abstract syntax tree.
For every require() call with a string in it, browserify resolves those module strings to file paths and then searches those file paths for require() calls recursively until the entire dependency graph is visited.
Each file is concatenated into a single javascript file with a minimal require() definition that maps the statically-resolved names to internal IDs.
This means that the bundle you generate is completely self-contained and has everything your application needs to work with a pretty negligible overhead.
If you check out some of the demos you can see that all the dependencies (and their co-dependencies) are bundled into one file.
A simple example:
browserify main.js -o bundle.js
In regards to using AMD as well Browserify supports it by using deamdify.
Using AMD modules:
browserify -t deamdify main.js -o bundle.js
I ended up doing the npm fetch thingy in java instead of a batch script and finally got it working. Didn't get browserify to work however.
Heres what I do:
creating the following webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js',
library:"<modulename>",
libraryTarget:"amd"
},
externals: {
react: "React",
"react-dom": "ReactDOM",
immutable:"Immutable",
moment:"Moment"
}
};
npm install <modulename>
Creating the following main.js
define('FOOBAR', ['<modulename>'], function(Foo) {
return Foo;
});
Running webpack main.js
I am using Babel 6 with the babel-preset-es2015 preset.
When the code is transpiled, it includes in it references to Symbols, which aren't supported in Node <= v0.12.0.
throw _iteratorError;
ReferenceError: Symbol is not defined
When I google this, I keep seeing that I need the Babel polyfill.
It's huge. I don't want it. I simply want Babel to transpile everything to straight ES5.
What am I missing?
In my Nodejs application, I use React. I browserify + reactify to transform .jsx files to js files.
I use this line of code in my entry js file :
require('node-jsx').install();
I noticed that node-jsx is deprecated. Do I still need to have this line if I already reactify my react files ?
No, it is not necessary to use either node-jsx or JSXTransformer when using reactify. Reactify does all the transforms needed.
Most likely the reason node-jsx is deprecated is because it is a very bad idea to compile at runtime, as the browser has to download the entire compiler and the compiler will take time to load. Always pre-compile JSX, babel, and coffeescript.