I've written a index.js module in flow which I transpiled with Babel, placed within a /dist directory and defined as the main file in the package.json:
{
"name": "my-lib",
"version": "0.9.0",
"description": "...",
"main": "dist/index.js",
...
}
the dist directory only contains the transpiled file.
when I use it on another project, by importing via npm or yarn (yarn add <my-local-path-to-the-module>), I can import into my project's modules but I lose the original flow definitions (of course, babel stripped them). How could I associate the flow definitions along with the transpiled file so as to have the module as well as its Flow types ready to use?
After creating your dist files, you need to create associating declaration files from your source code. https://flow.org/en/docs/declarations/
So in the end your dist dir would have a file structure like
- dist
- index.js
- index.flow.js
- something.js
- something.flow.js
- dir1
file1.js
file1.flow.js
You can use either https://github.com/Macil/flow-copy-source or https://github.com/lessmess-dev/gen-flow-files
Related
I have a project that uses gulp and I need to use splide js to create a slider, i used NPM to install splidejs and now I need to include splidejs CSS file to my main.scss however whatevere I do to get to node_modules file from my main.scss is not working. In webpack we use ~to get to node_modules but how can i do it in gulp to get there?
I have tried with ~ and with node_modules path and directory in project but nothing works
In Gulp, you can use the gulp.src() function to specify a file path that includes the node_modules directory. This function allows you to specify the source files that you want to include in your Gulp task.
For example, if you want to include all the JavaScript files in the node_modules directory in a Gulp task, you could use the following code:
gulp.src('node_modules/**/*.js')
.pipe(someGulpPlugin())
.pipe(gulp.dest('dist'));
This will include all the JavaScript files in the node_modules directory and its subdirectories in the Gulp task. The ** wildcard indicates that all subdirectories should be included, and the *.js pattern indicates that only JavaScript files should be included.
You can also use other file globs or patterns to specify the specific files that you want to include in your Gulp task. For more information on using file globs with Gulp, you can refer to the Gulp documentation.
I have added "type": "module" in my package.json file. And this has led to several issues.
I needed to change jest.config, next.config, tailwind.config, postcss.config into cjs format, as all of them use module.exports.
Also, as I added "type": "module", I deleted the package-lock.json file, node_modules and .next folder and ran npm install.
I have node v14.17.4, and next v11.1.2. Actually starting from next 11 esm should be supported.
I keep getting the error: Error: Must use import to load ES Module: /Users/Katharina.Schreiber/Desktop/not-just-another-weather-app/.next/server/pages/_document.js
require() of ES modules is not supported
I assume, it makes no sense to rename files in .next folder. I tried to clear next cache - nothing.
I am learning SASS. I am using VS Code as my code editor. I have installed Live SASS Compiler extension to compile SASS file.
I have created a folder. In this folder I have multiple folders. I want to create css file in each folder not main folder.
Check the image:
In SCSS folder there is a folder named "Partials-and-Imports". I want to create the css folder in the "Partials-and-Imports" folder not in main folder(CSS) because I have to create multiple folders in the main folder.
How can I do that?
Just copy and past this block of code in your sass compiler setting - Set your exported CSS Styles, Formats & save location - :)
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]
In the Next.js 9 tutorial the suggested way to import shared components is by relative paths, like
import Header from '../components/Header';
I want to use absolute imports, like
import Header from 'components/Header';
How do I make this work both locally and when I deploy using the Now CLI?
Using the suggested setup from the tutorial, my project structure is:
my-project
├── components
├── pages
└── package.json
Next.js 9.4 and later
If you're using Next.js 9.4 or later, see Black's answer.
Next.js 9.3 and earlier
There are different ways of achieving this, but one way – that requires no additional dependencies and not too much config – is to set the environment variable NODE_PATH to the current directory, i.e. NODE_PATH=..
1. Make it work locally
I think the easiest way to set NODE_PATH=. when running the dev/build scripts in your package.json locally (e.g. $ npm run dev or $ yarn dev), is to add it to each script in package.json:
"scripts": {
"dev": "NODE_PATH=. next",
"build": "NODE_PATH=. next build",
"start": "next start"
},
2. Make it work when you deploy
When you deploy to ZEIT Now, NODE_PATH must be set in a different way.
You can add a Deployment Configuration by adding a now.json file (it should be in the same directory as your package.json). If you don't have a now.json file already, create it and add the following contents:
{
"version": 2,
"build": {
"env": {
"NODE_PATH": "."
}
}
}
This tells Now to use NODE_PATH=. when buildnig your app (see build.env).
(It also tells Now that we use Now platform version 2 which is currently the newest version (see version). Omitting the version will give you a warning when you deploy using $ now.)
In Next.js 9.4 it is possible to do it by adding the baseUrl config to jsconfig.json (JS projects) or tsconfig.json (TS projects).
// jsconfig.json or tsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
This will allow imports from the root directory. It also integrates well with IDE such as VS Code. See documentation for more information.
Change web pack configuration:
//next.config.js file
module.exports = {
webpack(config) {
config.resolve.modules.push(__dirname)
return config;
},
}
Then use it like this:
import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources
I am total beginner in programming and just started to learn HTML/CSS.
For coding I started to use VS Code. And I really like it.
Only problem so far, what I got, is auto compiling of SCSS to CSS.
I have searched and read many solutions, and the best what I found was with ruby + sass + code in VS Code terminal sass --watch . It is watching my project and creating new CSS when new SCSS is created. And it is watching for changes in SCSS. But problem is that this code must be entered each time I am starting VS Code.
Tried also solution with Gulp file and package.json, but also could not make it start automatically. And it has to be made for each project separately.
I tried also Atom, and it has sass-autocompile package, and it works perfectly. So, simplest way for me would be to use Atom and forget. But I would like to use VS Code though.
So, generally question is if there would be possibility to create extension for VS Code to automate SCSS compilation to CSS (similar to Atom's package, which would be the best IMO). Or maybe somebody could explain me other way how to solve this problem.
You will need two things:
tasks.json file
Blade Runner extension for VS CODE
Start by creating .vscode folder in your project.
Then in it create tasks.json file with the following content:
{
"version": "0.1.0",
"command": "sass",
"isShellCommand": true,
"args": ["--watch", "."],
"showOutput": "always"
}
Now, after opening the project you can run the task by clicking Ctrl+Shift+B.
To automate the process use Blade Runner extension - https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner
Blade Runner will run the task automatically after opening the project :)
A solution without additional extensions
With sass
Assuming you have sass installed globally with for instance:
npm install -g sass
Open the folder and create a task.json file under .vscode containing
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Watch Sass",
"type": "shell",
"command": "sass --watch src/style.sass styles/style.css --style=compressed",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
}]
}
With node-sass
Replace sass with node-sass in the above.
In both cases make sure the source/destination filename, location and extension are correct (in my case src/style.scss and style/style.css)
With a Workspace file
Or copy the section in your .vscode-workspace file to avoid clutter of .json files.
Make sure to change the sass source and destination files to your personal needs.
Setup VSCode
[EDIT] whith the current version this is asked the first time you open the workspace file and the following steps are no longer needed.
To a llow automatic run tasks
Ctrl+Shift+P
select Manage automatic Tasks and
select Allow Automatic Tasks in Folder and
close and reopen your folder (or Workspace)
The sass compiler will be called and starts watching all your edits with a reassuring:
Compiled css\src\style.sass to css\style.css.
Sass is watching for changes. Press Ctrl-C to stop.
or with error messages when compilation failed.:
Error: semicolons aren't allowed in the indented syntax.
╷
7 │ padding: 0;
│ ^
╵
css\src\_base.sass 7:12 #import
css\src\style.sass 1:9 root stylesheet
Or use Easy Compile - it will auto compile on save.
https://marketplace.visualstudio.com/items?itemName=refgd.easy-compile
There already is an official document out there
https://code.visualstudio.com/docs/languages/css#_step-3-create-tasksjson
Only tip we can consider here is put an argument of --watch just not to build manually by hitting ctrl+shift+b every time.
// Sass configuration
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Sass Compile",
"type": "shell",
"command": "sass --watch styles.scss styles.css",
"group": "build"
}
]
}
Without any plugins, you can create .vscode folder in your project and just write some tasks.json
Easy Compile or Live SASS Compiler extensions for Visual Studio Code.
The Live SASS Compiler can recompile all sources, whereas Easy Compile just compiles a single file.
Easy Compile compiles when you save a file, whereas Live SASS Compiler can be made to watch your code and compile when it sees a change. You must manually start it every time, whereas Easy Compile runs out of the box.