I have been upgrading my project to use ES7. I have changed some codes, made use of classes.
But there is a problem.
class Example {
change = async (params) => {
const job = await Some.job();
}
}
Everytime I wanted to debug it gives me Unexpected token problem. Even if I run it with Babel, it fails. I know a project where people use this kind of syntax and it works. I could not a valid solution on the internet, a couple github issues but nothing solid, so asking here.
What is the problem here? How should I setup the Babel or the project? Below the error from the console and my config file screenshots.
Just check out this link. Installing Babel V6.x ES7 Async/Await on Node.js v6.2.0 with Nodemon
(You can also check this if you want to install plugin: https://babeljs.io/docs/plugins/transform-async-to-generator/ )
Alternatively search Google "babel async await support" and see the results.
Babel does not give you whole things supported out of the box, you have to make some configurations, installing presets/plugins etc.
In my situation I needed to install stage-0 preset and/or transform plugins to make sure async keywords are supported. In the link above it says stage-3 but you can install stage-0 also, it includes all the plugins up to stage-3.
Babel needs to be documented much better, there is no way you could just get to documentation and set things up. There is not a straight one way Getting started a Project setup that shows you things in an ordered way. Hope they woul add it.
Related
Before I start, I just want to mention I'm studying and learning to use a proper workflow with git, vue, express, npm, cli and webpack. I'm very new to these concepts but have been enjoying learning and troubleshooting this as I go along. I've been watching a popular video tutorial (I'll link if it is ok) on using VueJS with Express. In the past I've been just a standard html/php, javascript/jquery, css dev with no cli tools. I decided to dive head first after seeing how amazing these tools are and having that 'AHA' moment while using them.
I finished the first part of the tutorial which was setting up node, npm, etc... I created a git repository (here https://github.com/drpcken/tab_tracker), made my first commit (wow that was fun) and started going through the tutorial after getting all my dependencies configured and using nodemon and eslint in the terminal to see issues.
Now my project has it's main project folder, and then a client and server subfolder that separates my frontend (vue) and backend (express). The tutorial had me setup eslint using the standard style guide. I quickly realized I didn't want this since standard doesn't require semicolons at the end of each line (I'm old fashioned and preferred them). I then realized that the linting I wanted was airbnb. So last night, while working in my server folder I ran the command to init my eslint: node ./node_modules/eslint/bin/eslint.js --init and changed the style guide to airbnb. It worked beautifully, and I happily committed my changed to my repository this morning.
When I woke up and started studying again this morning, it dawned on me that my client folder also needed to have the eslint initialized and switched to airbnb style guide. So I did so, the same way I initlaized eslint on my server folder. However, it seems that it didn't take. If I add a semicolon to the end of one of my js files in the client folder, my compiler/terminal complains:
✘ http://eslint.org/docs/rules/semi Extra semicolon
src/router/index.js:2:32
import Router from 'vue-router';
I have no clue why this would happen. I configured eslint to use airbnb the same way as my server folder. Here is a link to my repo: https://github.com/drpcken/tab_tracker
In short: switching from standard style guide to airbnb lints differently in one folder than the other. server folder lints properly with airbnb (requiring semicolon) but my client folder, using the same airbnb linting does not (gives an error when I add semicolons).
Your server side code uses require whereas your client side code does it using import. So yeah, you cannot actually compare the validity of the same amongst both of them.
If you have the look at the documentation here ( which you may trace from the link above the error snippet you shared ), you may realize this : It is not the airbnb style guide but the eslint default rule for ASI ( aka automatic semicolon insertion) . You may wish to remove the influence of the same from your code.
Addendum : As Fabio Antunes just commented, you may wish to remove the eslint-standard from your package.json. Let us know if that helps.
I have use Webpack for a long time and i always tangled with Webpack configurations. Recently, i try something to make VSCode show intellisense with Webpack and i found out webpack is a function.
That's great because now i can enable intellisense without reading complicated boring documents. But when it runs, it's not wonderful as i respect. The type checking warning wrong. I tried to run webpack({}) in console and it return something like Compiler schemas or default configuration. Although I found another way to enable intellisense using /** #type {webpack.Configuration} */ but still wonder; what does webpack() function really do and do we need to care about it?
Thanks, Sincerely!
webpack function enables a programmatic use of Webpack.
As Webpack Node.js API documentation states,
The imported webpack function is fed a webpack Configuration Object and runs the webpack compiler if a callback function is provided
<...>
If you don’t pass the webpack runner function a callback, it will return a webpack Compiler instance. This instance can be used to manually trigger the webpack runner or have it build and watch for changes, much like the CLI.
It isn't needed in webpack.config.js because this is already handled by Webpack CLI.
To make a long story short, I'd like to run my jest tests (using CLI) with electron instead of node.
It's relevant when using native module, because you need to build them using electron header while jest run them using plain node.
So I must either build my native modules for my app (at least in dev mode) or my tests, I can't have both to work.
In this thread they propose to use mocha, but I want to use jest, which is far more advanced and interact well with React.
Note that I don't want to mock the native module, since I write integration tests.
I opened an issue about the zmq github repo. One proposed solution is "to target your tests using ELECTRON_RUN_AS_NODE=true electron as your node runtime".
This is a very good solution, since using electron will both make the test environment closer to the execution environment and solve my specific issue with native modules.
I'd like to apply that, but I do no seem to be able to setup the jest CLI to use electron instead of node, and I have no idea where to start. Maybe I should run jest programmatically without the CLI ? But I might lose the nice test filtering features of the CLI.
Has anyone solved this already?
"ELECTRON_RUN_AS_NODE=true ./node_modules/.bin/electron ./node_modules/.bin/jest works fine
If you're on Windows, then Eric Burel's excellent discovery might need a bit of a tweak to use the environment variable, and call the right version of Jest:
cross-env ELECTRON_RUN_AS_NODE=true ./node_modules/.bin/electron ./node_modules/jest-cli/bin/jest.js
Sadly, the colouring of the text in the results is lost.
I'd like to base an Aurelia project on this skeleton-esnext-webpack starter app:
https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-webpack
But my question is, how to exclude libraries from being bundled by easy-webpack? You can see the problem just by adding a typical server-side library like this Postgres client:
npm install pg-promise --save
Then when running npm start (you don't even have to reference pg-promise from your code) it will puke exceptions and there is no point trying to solve this as the correct solution is to exclude pg-promise from being bundled by easy-webpack. Any examples of how to solve this?
I know this is kinda late, but I came across this while trying to find the answer for the same problem. For anyone else experiencing this, you will find the answer here.
Basically, aurelia-webpack-plugin will import all the dependencies listed in your package.json. Luckily, there's a way around this and it's pretty simple. You only need to add:
"aurelia": {
"build": {
"includeDependencies": "aurelia-*"
}
},
inside package.json. If you are using one of the skeleton navigation starters, the aurelia key will already be there but you have to add "includeDependencies": "aurelia-* next to "resources" : []
So the thing is I went through the internet and checked for available linters. Mostly all the the LESS linters available provide a command line interface or a plugin for grunt or gulp. What I really want is a simple Node Plugin which is configurable and usable with NODEJS through Code and not through CLI.
Also due to unavailability of the tags such as LESSLINT and SCSSLINT could not add those tags to the questions.
Is there any node plugin available to do this?
If not, How can I use CLI through NodeJS and also get the callbacks?
I need the callbacks since that's the most powerful feature of NodeJS and besides my code is dependent on the callbacks..
P.S.: I do not need any code, all I need is directions.
Thanks for the support
A Node port of scss-lint was recently released, you can get it here: https://github.com/FWeinb/scsslint
It can be used either in Grunt or just as a normal Node module.
LESS has built-in linting, but it doesn't seem to be accessible through Node. You can use spawn or exec and the LESS CLI with the --lint flag. See the LESS docs here: http://lesscss.org/usage/#command-line-usage-options