I need to put somme JS Functions in my Enduro.js project.
So I added my functions in /assets/js/main.js (which content is "// put your js here :-)/***" after Enduro.js new project setup).
I installed babel as advised :
npm install --save-dev babel-cli babel-preset-env
Enable JS compiling as advised in /enduro.json :
"babel": {
"presets": ["env"]
}
I can see now "js compiling started & js compiling finished" messages in console, but still, my functions don't work (I can write trash in /assets/js/main.js and I get no error reporting in console).
I guess something is going wrong, main.js is not compiled, so what is the proper way to enable js compiling in enduro.js ?
Okay, so the default /assets/js/main.js is not included by default...
You have to manually include it in your html file (index.hbs by default)
Related
I'm having trouble using the npm sqlite3 package with electron. I'm compiling my electron app from Typescript files to Javascript, bundling them with browserify, and then running the main bundle to launch the main process.
But when I try to use sqlite3, I have problems. I've tried using electron-rebuild as its own separate step before compiling the typescript. I've tried installing sqlite3 with a --build-from-source flag. But whenever I try to run my main bundle, I get a "package.json does not exist" error, which seems to be coming from node-pre-gyp code in my main bundle, which is from the sqlite3 module.
Does anyone have any ideas as to what I'm doing wrong? I don't understand why the code is building itself again with node-pre-gyp when I already rebuilt it with electron-rebuild. I have a package.json in the root directory of the project, but the main bundle is in (root)/build/js-bundles, and the code is looking for package.json in (root)/build.
I know my description isn't all that clear, so if anything isn't obvious I'll do my best to clarify. (The program works fine when I remove the dependency on sqlite3).
Okay, so the problem is that I was using browserify to bundle the sqlite3 dependency. By excluding sqlite3 with the --exclude flag, the problem disappeared.
The issue seems to be that building sqlite3 generates a sqlite3.js file whose sole purpose is to find (and load?) the built node-sqlite3.node binary -- but only at runtime. When sqlite3 is bundled and the bundle is run, it will attempt to locate the binary, but it can't, because my bundle isn't in the node_modules/sqlite directory, it's in my build directory. By excluding sqlite3 from the browserify bundling, at run-time, the import * as sql from "sqlite3" will find node_modules/sqlite3/sqlite3.js, find the binary, and then load it into the program.
The lesson seems to be that while browserify knows how to bundle standard NodeJs modules like fs and path, bundling custom native node modules from npm doesn't work. The program has to find it at run-time.
I don't know anything about the inner workings of NodeJs and how the program knows to look for sqlite3 in build/../node_modules/sqlite3 (I didn't know that it could), so I'd be happy if anyone more knowledgeable could provide details.
Also, even after excluding sqlite3, I still had problems because I hadn't built sqlite3 against my version of electron. Resources for doing this can be found at electron-rebuild in the general case, or in the case of sqlite3, at mapbox/node-sqlite3 in the Installing section.
Imagine a very simple program with a main file and some functions in a separate file, using ES6 modules and intended to be run with node.js.
my-utils.ts:
import * as fs from "fs";
export function readSimpleFile() {
return fs.fileReadSync("hello.txt", "utf-8");
}
main.ts:
import {readSimpleFile} from "./my-utils"
console.log(readSimpleFile());
What is the minimum set of files I need to add to the project and commands I have to run to get it building, running and checking types?
If you are to run a typescript project with node you need to have at least node, npm and typescript installed on your plateform.
Using an IDE to setup the project
Using intelliJ IDEA or Webstorm (they are the ones I know the best), the compilation of typescript into javascript is done automatically; you only need to do some settings.
Let us assume you have a file called project.ts containing your hello world code; IDEA or Webstorm will compile your code to project.js. Then you will only need to do node project.js to run your project.
Doing everything from scratch
First you need to know where exactly your npm packages are installed globally. This command can help you identify the path: npm config get prefix. In this folder, you should have a nodes_modules subfolder that contains the typescript module. If there is no typescript module, that is because you did not install typescript globally (npm install -g typescript).
Then you have to add the path of the bin of typescript subfolder in your environment variable.
Now you can compile the project with typescipt: tsc project.ts and you can run it node project.js.
Since you are using node function like fs you will need to install node typings npm install #types/node --save-dev before compiling with tsc.
Compilation option
To enable or disable all strict type checking options, you might need to use compilation option. You have to create the file in which you will specify the compilation option: tsc --init will create a tsconfig.json in which you can specify what behaviour you would like to have during the compilation of your app. All options are listed here.
I have an angular-cli app,
npm -v 3.10.8
node -v v6.9.1
angular2 ^2.4.0
angular/cli 1.0.0-beta.32.3
when I add to package.json this
"angular2-auto-scroll": "1.0.12"
angular2-auto-scrol website
and in app.module.ts import it
import { Angular2AutoScroll } from "angular2-auto-scroll/lib/angular2-auto-scroll.directive";
and add it to declarations section ng build --prod fails with this error
ERROR in Unexpected value 'Angular2AutoScroll in C:/coding/workspace/myapp/myapp-web/node_modules/angular2-auto-scroll/lib/angular2-auto-scroll.directive.d.ts' declared by the module 'AppModule in C:/coding/workspace/myapp/myapp-web/app_code/app/app.module.ts'
ERROR in ./app_code/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\coding\workspace\myapp\myapp-web\app_code'
# ./app_code/main.ts 6:0-74
# multi ./app_code/main.ts
however when I build with just ng build without --prod then all build fine.
Does anyone know what could be the reason? Or any other way I can import this npm package so it does not fail PROD build?
The issue is with AOT compilation. AOT happens by default when using --prod flag.
take a look at the source code for angular2-auto-scroll That project defines one TS file in the src/angular2-auto-scroll.directive.ts
If you look at the tsconfig.js file specifically "module": "commonjs". you'll see that the module this directive transpiles to is commonjs
If you look in your project under C:/coding/workspace/myapp/myapp-web/node_modules/angular2-auto-scroll/lib/ you'll see a TS type definition .d.ts, a .js and a .map file. the js file is a commonjs module.
AOT does not like commonjs modules, you can research that on your own, it needs either an es5 or es6 module.
All that said, here are some options to fix it
Copy the directive TS file from the source github angular2-auto-scroll.directive.ts to your prject and remove the dependency.
or you can make a pull request to the repo asking to change the "module": "commonjs" to "module": "es6" note: I opened an issue for it here
or if you do not care for aot, (which is highly recommended btw), you can cancel it by running buildcommand with --aot=false read here on build options
hope this helps.
Resources on AOT:
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
https://github.com/angular/angular-cli/issues/1732
I wrote a very basic express.js app. Then tried to make it one .js file. Browserify compiled the whole thing to a one file. But browserify-compiled code didn't work. As far as I know, browserify just replaces require statements with module codes. Error is:
C:\Users\HP\n\express\app.js:27025
__proto__: http.IncomingMessage.prototype
^
TypeError: Cannot read property 'prototype' of undefined
at Object.__dirname.173.accepts (C:\Users\HP\n\express\app.js:27025:34)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.170../application (C:\Users\HP\n\express\app.js:26823:11)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.168../lib/express (C:\Users\HP\n\express\app.js:26154:18)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.153.express (C:\Users\HP\n\express\app.js:24010:15)
Browserify is designed specifically to package code for a browser.
Node.js supports a number of modules that a browser doesn't which have to be emulated by builtins. These modules will be replaced by a browser-specific shim. Some only supply a subset of the Node API that makes sense to have in a browser.
So you are running an app that has converted all the Node.js modules to support running what it can in a browser, back in Node where the modules are available but are no longer being used.
Try rollup or you could possibly configure babel to work like you need
I had this very same issue but like you said the compile code should work on server side. I solved it from this link:
https://www.linkedin.com/pulse/bundling-nodemodules-your-nodejs-app-one-single-file-xuan-son-nguyen/
Use browserify for bundling and terser for minifying. Starting by installing them globally:
npm install -g browserify
npm install -g terser
Next, we have to add a build script to package.json
...
"scripts": {
...
"build": "browserify --node --ignore-missing index.js | terser > bundle.js"
}
...
Each time you want to promote to production, you have to make a new bundle:
npm run build
A new file called "bundle.js" will be created.
Let there be peace, and there was peace. Happy coding.
I'm running my node application with:
"./node_modules/nodemon/bin/nodemon.js --ignore ./build/* ./bin/www --exec babel-node --debug=7001",
When I connect with a WebStorm remote configuration it seems to work, but the placing breakpoint results in either them being ignored, or the code actually stop at different lines.
This is probably due to Babel transpiling. How can I do that, given my code is transpiled at runtime?
My .babelrc file:
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"]
}
Here is the revelent documentation : https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/
If you’d like to debug your code using WebStorm or Chrome, make sure
the tools you’re using generates source maps. For example, when
using Babel only, you need to add "sourceMaps": "both" option to
your .babelrc file or pass it as a command-line argument. If you’re
using Babel as a part of a more complex build process, you might need
a addition configuration for generating source maps, e.g. use
gulp-sourcemaps with Gulp or add devtool: "source-map" option when
using Webpack.
Source maps allow you to put breakpoints in the original source files in the IDE and be sure that they are hit then compiled code is
executed in the browser.