I have one cli project and one boilerplate project. Now I want to install all babel plugins and presets inside the cli, and use the cli to transpile the boilerplate.
The problem is, I'd like to run cli commands in boilerplate directory, and babel always looks for plugins/presets from boilerplate/node_modules instead of cli/node_modules.
How can I config babel to search only cli/node_modules?
I've tried to set sourceRoot and moduleRoot, but neither work.
You can explicitly pass the resolved plugins, e.g.
transform(code, {
preset: [require('babel-preset-es2015')],
});
Related
For quicker development, I am interested in exposing one of the files of my NEXT.js project as an npm package script. This enables consuming that code in a simple way from the terminal, orchestrate maintenance tasks, etc.
Let's assume the file:
import { Something } from 'some_library';
console.log("Some task to be performed");
And in my package.json:
"scripts": {
"dev": "next dev",
...
"mine": "execute my file" < HERE
},
My first intuition would be calling node directly over my file in the mine task, but this would fail with the following error:
SyntaxError: Cannot use import statement outside a module
I understand the babel transpilation needs to be performed before calling my file, activity that I assume is performed automatically by the dev command.
Is there any way in which I could have my own task that targets code that could be used directly in NEXT.js?. Is there any way to trigger the transpilation and after execute my file?.
Your package is not part of Next.js project and won't be transpilled by Next.js.
You can create a command (npm scripts) that calls Babel to transpile the package and then executes it but it's just confusing. Next.js projects don't include Babel as a root dependency by default, so your package would rely on a module that doesn't explicitly included.
Instead, make the package ready to use in production. Install Babel or another compiler as a dev tool in the package project. Before publishing the package, transpile it to a file that Node.js can execute.
In another words distribute executable files (the package itself) and not just a source of code of the package.
I created a new project with the create-react-app scaffold, and then I wanted to use the optional-chaining plug-in of babel. I installed the package according to the document and configured it, but vscode prompted grammatical errors. What can help me? please.
this is my package.json.
this is the problem:
If you are using CRA there is probably no way instead of ejecting project and applying Babel presets manually (according to https://github.com/facebook/create-react-app/issues/4604).
However, if you are decided to use eject there should be able to add plugin to babel config which is described here https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining. Probably applying stage-0 preset of Babel (https://babeljs.io/docs/en/babel-preset-stage-0) can also be a solution.
Edit: see also Null-safe property access (and conditional assignment) in ES6/2015
The error you are seeing is from Visual Studio Code's built-in JavaScript and/or TypeScript validator. In order to circumvent this, add this to your vscode settings.json file:
"javascript.validate.enable": false
Additionally you can disable the built-in TypeScript validator like this:
"typescript.validate.enable": false
Once those are disabled, eslint will take over and show you the proper errors when applicable.
How to configure babel in non-nodejs Environment/without npm ?
Use babel-standalone. Its documentation emphasize non-Node.js environments just like you do:
babel-standalone is a standalone build of Babel for use in non-Node.js environments, including browsers.
To confogure it, you can use data-presets and data-plugins attributes as also depicted in the Github page usage docs as follows:
<script type="text/babel" data-presets="es2015,stage-2">
I want to support the usage of 'debugger' statements locally and on the development deployment but not when it gets to staging or production.
I'm using Ember-cli with environments and am not understanding how to define the jshint or eslint directives differently.
By design we can configure both linting libraries differently via their configuration files for app code & test code via .eslintrc or .jshintrc files which reside at the root folder and the tests folder. So even though we can have different rules for these categories of code, we can't differentiate them per environment.
The reason it might not make sense to do so is because the assets that get generated after the build process that gets deployed doesn't necessarily need to conform to these rules since transpilers like babel (may) optimize generated code for us.
While I don't understand the need to keep debugger statements after a debugging session in the codebase, you can use broccoli-strip-debug to remove them automatically in production builds and disable the debugger flag in the linting configuration altogether which gets you the setup you're looking for.
I've used Yeoman to make a quick project skeleton using the yo webapp generator command. In the resulting Gruntfile I see that it's setup to compile CoffeeScript but it seems like its just sticking compiled files in a tmp folder.
coffee: {
dist: {
files: {
'.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'
}
},
},
How do these get included in the project during development. I'm not using RequireJS.
The yeoman docs are unclear on how to use coffeescript. They only mention that it gets automatically compiled.
Using yeomen 1.0.0-rc1.4. I use:
$ yo angular --coffee
The resulting project has controller and app scripts in CoffeeScript.
grunt configuration file remains in js (what is not really a problem).
Running
$ grunt test
runs tests and all seems fine.
$ grunt server
is also doing what one expects (build the app, test it, starts server, opens the app in web browser and starts watching for changes, so if I change a coffee script file, it is quickly reflected in the web broser.
Documentation also states, one can use yo to add particular pieces like
angular:controller
angular:directive
angular:filter
angular:route
angular:service
angular:decorator
angular:view
each can be called with a --coffee switch and get the script in CoffeeScript, e.g.:
yo angular:controller user --coffee
I just found an issue in the github repo referencing this problem. https://github.com/yeoman/generator-webapp/issues/12
It offers a temporary solution: https://github.com/yeoman/generator-webapp/issues/12#issuecomment-13731929