using and consuming typescript npm modules - javascript

So I want to write shared code in typescript, make an npm package of it and be able to install it..
So I tried writing an external lib like this :
export class Lib {
constructor(){
}
getData(){
console.log('getting data from lib');
}
}
Running npm link on external lib
And running npm link "package" in consuming apps directory, to have it appear in it's node_modules
consuming-app
index.ts
node_modules/
external-package-with-typescript
index.ts is simple it just looks like :
import { Lib } from 'external-package-with-typescript'
var l = new Lib();
Then I try to bundle it all with
browser index.ts -p tsify --global --debug > bundle.js
This results in an error from the external package
'import' and 'export' may appear only with 'sourceType: module'
I can get it to work with https://github.com/basarat/ts-npm-module-consume
But that produces an output that looks like
consuming-app/ index.ts
external-package-with-typescript/ index.ts
Which is of no value to me as I want one .js file that I can include in index.html
Ideas anyone?

Have you tried using declare instead of export?

Related

Node.js cannot import from a file in the same directory

My project directory's structure is as follows:
ghostbot (main project directory)
- package.json
- package-lock.json
- src/
-- (*.ts files)
- build/
-- (compiled *.js files)
- node_modules/
- tsconfig.json
My npm start script is a simple TS compilation and starting the compiled index.js:
"scripts": {
"start": "npx tsc --rootDir src --outDir build && node build/index.js"
},
After I run npm start from the main directory, the typescript is compiled properly (I can see files appearing in build/), then node starts and throws this error:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '[...]\ghostbot\build\setup' imported from [...]\ghostbot\build\index.js
Interestingly, when I look at the problematic import in the compiled index.js in WebStorm, I see this:
WebStorm seems to resolve the problematic ./setup import path correctly, but Node can't.
I tried running the compilation followed by node manually, including from the build directory rather than node build/something from the main dir. I tried various formats for the import path (including the complete verbose path starting at my C: drive), always with the same error as described in the post.
I am not a TypeScript expert but I guess you should import from "setup.js" not from "setup".
I think when you try to import from "setup" then node.js tries to find a module "setup" in "node_modules" directory.

Bundling a subfolder's index.js with rollup and requiring modules from main directory

I am building a framework, in which I want to have examples folder, like this:
./framework-core
./framework-constants
./framework-helpers
./examples
I want to be able to run the examples with rollup when I download the framework from github, using commands in my package.json such as:
"app0": "rollup examples/app0/app.js --format iife --name 'bundle' --file examples/app0/bundle.js"
In my app0/app.js file I include the framework's main parts, like this:
import { FrameworkClass } from '../../framework-core'
Upon running my app0 command from the cli, I get the following error [!] Error: Could not resolve '../../akira-core' from examples/app0/app.js
I understand this has to do with my relative paths, but am unable to get it working. Is this how it should be done? Is there a smarter way I am missing? Any help is more then welcome.

meteor-client-bundler with webpack __meteor_runtime_config__ is not defined

I am trying to use this with my webpack project
https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
but I get this error
ReferenceError: __meteor_runtime_config__ is not defined
Here are the steps I did
create a new meteor project
then I run the client bundler like this
meteor-client bundle —source=./ —destination=./meteor-client.bundle.js —config=meteor-client.config.json
and here is the config
{
"runtime": {
"DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000"
},
"import": [
"meteor-base#1.3.0",
"mongo#1.4.2",
"reactive-var#1.0.11",
"jquery#1.11.10",
"tracker#1.1.3",
"shell-server#0.3.1",
"react-meteor-data"
]
}
then I copy my meteor-client.js to my webpack project node_modules
and import it like this
import 'meteor-client'
then I bundle webpack and run dev-server and I get the above mentioned error.
I had the same issue, and fixed that by putting my meteor-client.js to node_modules and exclude node_modules from processing by babel-loader with webpack (or you could just exclude meteor-client.js). Raw loading will workaround that.
In case someone still searching.

How to manually bundle two javascript files?

I'm writing code in Javascript for Espruino (an embedded platform) and there is a restriction: Only one file is allowed to be saved into the device.
For the following code to work:
var x = new require("Something");
x.hello()
Something module should be reachable from main.js file. The Something module is a separate file and looks like this:
function Something() {
....
}
Something.prototype.hello = function() {
console.log("Hello there!");
}
exports = Something;
Question is; How can I concatenate these two files and still use the Something module as require("Something"); format?
The answer is found in Espruino forums:
# create bundle
BUNDLE="init.min.js"
echo "" > ${BUNDLE}
# Register modules via `Modules.addCached()` method
# see: http://forum.espruino.com/comments/12899741/
MODULE_NAME="FlashEEPROM"
MODULE_STR=$(uglifyjs -c -m -- ${MODULE_NAME}.js | sed 's/\"/\\\"/g' | sed "s/\n//g")
echo "Modules.addCached(\"${MODULE_NAME}\", \"${MODULE_STR}\");" >> ${BUNDLE}
uglifyjs -c -m -- init.js >> ${BUNDLE}
Why don't you use webpack to bundle the modules files into one file.
I suppose that your current directory is your project directory
First install nodejs at:
https://nodejs.org/en/download/
or sudo apt-get install nodejs
Second, install webpack using this command
npm i -g webpack
bundle your module
To build your bundle run this command:
webpack ./main.js bundle.js
Note: your bundle.js will include all the module files that you have required in main.js
There is https://www.npmjs.com/package/espruino tool that has function to prepare code (concatenate + minimize) for uploading to your board.
I use it in my build proc that compiles typescript code to javascript and then prepares for board upload. Tutorial is here https://github.com/espruino/EspruinoDocs/blob/master/tutorials/Typescript%20and%20Visual%20Studio%20Code%20IDE.md
Yes like it's mentioned above, you need to uglify the code. You cannot use webpack or grunt here. They will transpile the code which will break your require libraries.
Here is how I achieved this in my case:
I put all my files inside a folder (like /src). Don't import one file from another. Then minify all files in the folder into a single file (eg. index.js)
uglifyjs src/* --compress --mangle -o ./index.js
Then just upload this index.js into espruino. You need to install this library globally first.
npm install -g espruino
espruino -p /dev/cu.wchusbserial1420 -b 115200 --board ESP8266_4MB.json -e 'save()' index.js
I made a simple example here:
https://github.com/aliustaoglu/espruino-http-server

bundle a large node.js application into a single .js file

I would like to bundle a largish node.js cli application into a single .js file.
My code is structured as follows:
|- main.js
|--/lib
|----| <bunch of js files>
|--/util
|----| <bunch of js files>
...etc
I can use browserify to bundle the whole thing into one file using main.js as the entry point, but Browserify assumes the runtime environment is a browser and substitutes its own libraries (e.g. browserify-http for http). So I'm looking for a browserify-for-node command
I tried running
$ browserify -r ./main.js:start --no-builtins --no-browser-field > myapp.js
$ echo "require('start') >> myapp.js
but I'm getting a bunch of errors when I try to run $ node myapp.js.
The idea is that the entire application with all dependencies except the core node dependencies is now in a single source file and can be run using
$ node myapp.js
Update
=============
JMM's answer below works but only on my machine. The bundling still does not capture all dependencies, so when I try to run the file on another machine, I get dependency errors like
ubuntu#ip-172-31-42-188:~$ node myapp.js
fs.js:502
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT, no such file or directory '/Users/ruchir/dev/xo/client/node_modules/request/node_modules/form-data/node_modules/mime/types/mime.types'
You can use pkg by Zeit and follow the below steps to do so:
npm i pkg -g
Then in your NodeJS project, in package JSON include the following:
"pkg": {
"scripts": "build/**/*.js",
"assets": "views/**/*"
}
"main": "server.js"
Inside main parameter write the name of the file to be used as the entry point for the package.
After that run the below command in the terminal of the NodeJS project
pkg server.js --target=node12-linux-x64
Or you can remove target parameter from above to build the package for Windows, Linux and Mac.
After the package has been generated you have to give permissions to write:
chmod 777 ./server-linux
And then you can run it in your terminal by
./server-linux
This method will give you can executable file instead of a single .js file
Check out the --node option, and the other more granular options it incorporates.

Categories

Resources