I want to use PostCSS Preset Env in my project. In the documentation it says I need to write a config file. Is it possible to instead of writing a config file have the configuration in my package.json?
In this other project it shows as this might be possible.
I tried, and it works.
Example in package.json:
"browserslist": [
"defaults"
],
"postcss": {
"plugins": {
"postcss-preset-env": {
"stage": 0
}
}
}
Related
Is it possible to test ES6 Modules with Jest without esm or babel? Since node v13 supports es6 natively have tried:
//package.json
{
…
"type": "module"
…
}
//__tests__/a.js
import Foo from '../src/Foo.js';
$ npx jest
Jest encountered an unexpected token
…
Details:
/home/node/xxx/__tests__/a.js:1
import Foo from '../src/Foo.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
When babel is added a transpiler, it works, but can es6 modules be used natively as well?
Yes, it is possible from jest#25.4.0. From this version, there is a native support of esm, so you will not have to transpile your code with babel anymore.
It is not documented yet, but according to this issue you have to do 3 easy steps to achieve that (At the time of writing this answer):
Make sure you don't transform away import statements by setting transform: {} in your jest config file
Run node#^12.16.0 || >=13.2.0 with --experimental-vm-modules flag
Run your test with jest-environment-node or jest-environment-jsdom-sixteen.
So your jest config file should contain at least this:
export default {
testEnvironment: 'jest-environment-node',
transform: {}
...
};
And to set --experimental-vm-modules flag, you will have to run Jest from package.json as follows (I hope this will change in the future):
"scripts": {
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
}
I hope, this answer was helpful to you.
Note that this is is still experimental, but we have documented how to test this, so there's hopefully less confusion.
https://jestjs.io/docs/en/ecmascript-modules
The steps in https://stackoverflow.com/a/61653104/1850276 are correct
I followed the tips provided in the accepted answer, but I added the property "type": "module" in my package.json in order to jest works properly. This is what I done:
In package.json:
"devDependencies": {
"jest": "^26.1.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jest-environment-node": "^26.1.0"
},
"scripts": {
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
},
"type": "module",
"jest": {
"transform": {},
"testEnvironment": "jest-environment-jsdom-sixteen"
}
To run jest from "jest" extension in VSCode with "--experimental-vm-modules" flags, put this config in your global or workspaces settings.json:
"jest.nodeEnv": {
"NODE_OPTIONS": "--experimental-vm-modules"
}
In addition to #Radovan Kuka's answer, here's how to run Jest with ES modules, using npx:
"test:monitoring": "npx --node-arg=--experimental-vm-modules jest -f monitoring.test.js --detectOpenHandles",
The benefit is that one doesn't need to provide the absolute node_modules path.
Without Babel, here's a complete, minimal example that works on recent Jest versions. Run with npm test.
$ tree -I node_modules
.
├── package.json
├── src
│ └── foo.js
└── __tests__
└── foo.spec.js
package.json:
{
"type": "module",
"scripts": {
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
},
"devDependencies": {
"jest": "^29.3.1"
}
}
src/foo.js:
export const bar = () => 42;
__tests__/foo.spec.js:
import {bar} from "../src/foo";
describe("foo.bar()", () => {
it("should return 42", () => {
expect(bar()).toBe(42);
});
});
The secret sauce is in the package.json: "type": "module" and NODE_OPTIONS=--experimental-vm-modules jest.
If you want to add a mock, it's a bit complicated. See this answer.
How do I inject my environment variable into the final build that gets published to npm?
I'm using the dotenv package and that works great locally. However when I do npm publish, the env variable is gone since it just runs the file in the main property of the package.json.
Some relevant fields from package json:
"main": "./lib/index.js",
"typings": "./lib/index.d.ts",
"files": [
"lib",
".env"
],
"scripts": {
"start" : "tsc && node -r dotenv/config ./lib/index.js"
},
"bin" : {
"run-app" : "./lib/index.js"
},
"dependencies": {
"dotenv": "^8.2.0",
}
.gitignore:
# OSX
.DS_Store
node_modules
notes.MD
lib
.env
I tried to inject my env variable by passing it to my start script and also call the .config() method on dotenv inside the code. Either way the env variable ends up undefined when running my package using npx.
What am I doing wrong?
How do you pass options to the env preset when using babel-node through the command line? I've looked through the docs but was unable to find how to configure the babel-node env preset.
What I'm trying to target the current version of node installed on my machine. The equivalent with a .babelrc file would be
{
"presets": [
["env", {
"targets": {
"node": "current"
}
}]
]
}
Thanks!
You can use inline --presets flag.
For Example:
babel-node index.js --presets=env
When I enter $ webpack into my terminal I receive the following error:
webpack config
/Users/kristenmkulha/Desktop/react-help-queue/config/webpack/development.js
not found, please run 'bundle exec rails webpacker:install' to install
Webpacker with default configs or add the missing config file for your
custom environment.
I found a similar issue here: Webpack command in node brings /config/webpack/development.js not found and changed the deprecated babel-preset-es2015 to babel-preset-env and I already had the -loader suffix. These updates still result in the same error.
Here is my webpack.config.js:
const webpack = require('webpack');
const { resolve } = require('path');
module.exports = {
entry: [
resolve(__dirname, "src") + "/index.jsx"
],
output: {
filename: 'app.bundle.js',
path: resolve(__dirname, 'build')
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
options: {
presets: [
"env",
"react"
]
}
},
],
}
};
Here is my package.json file:
{
"name": "react-help-queue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1"
}
}
Huh, it looks like running "webpack" on the command line is invoking a different tool (maybe "webpacker"? https://github.com/rails/webpacker)
There are two ways to solve this:
add a additional script to package.json to kick off webpack.
"scripts": {
"build": "webpack -p"
},
With the above added, execute this command in a terminal: npm run build.
When a script is executed via npm run, npm will automatically include binaries (like webpack) in its PATH, so it the script uses the webpack binary that is part of the apps dev dependencies. Read more on this here: https://docs.npmjs.com/cli/run-script.
Install webpack globally: npm install -g webpack.
This will make webpack available at the command line in all cases, which allows the developer to just type webpack and have it run. This should(?) override the existing "webpacker" command. If not, you may need to uninstall that tool or modify your PATH.
Installing npm packages globally is convienient but it can cause headaches. For example, if two different projects need two different versions of webpack, it may not be efficient. Also, you may find there are several steps in a "build" to execute once an application gets more complex, so having a convenient script included in the project may be appealing (especially for projects with multiple developers).
Hope this helps!
The way I'm using packages that not available out of the box in npm, right now is like that:
package.json has:
"napa": {
"angular": "angular/bower-angular",
"angular-animate": "angular/bower-angular-animate",
"d3": "mbostock/d3",
"ui-router":"angular-ui/ui-router",
"bootstrap":"twbs/bootstrap"
},
"scripts": {
"install": "node node_modules/napa/bin/napa"
and that installs files into node_modules directory, and I use them natively like this
require('angular/angular')
require('ui-router')
... etc
That works, but I was thinking if it's possible to use packages installed with bower (into bower specific folder) and use them natively as node modules? Is it possible to tweak node's module resolution and force it to look for modules not just inside node_modules directory, but also in bower directory as well? Or maybe using npm link or whatever?
Is there some sort of convention to use browserify with bower?
You can try to install via debowerify
The package.json may then look as follows:
{
"name": "browserify-begin",
"version": "0.0.0",
"dependencies": {
},
"browserify": {
"transform": [
"debowerify"
]
},
"devDependencies": {
"browserify": "^4.1.5",
"debowerify": "^0.7.1",
"grunt": "^0.4.5"
}
}
Given angular is installed with
bower install angular
Then within the js file will be as follows:
require("angular");
You can use browserify-shim and configure the bower-installed modules in your package.json like this:
"browser": {
"angular": "./bower_components/angular/angular.js",
"angular-resource": "./bower_components/angular-resource/angular-resource.js"
},
"browserify-shim": {
"angular": {
"exports": "angular"
},
"angular-resource": {
"depends": ["./bower_components/angular/angular.js:angular"]
}
},
Then your code can require them by their short name as if there were regular npm modules.
Here is the spec for the "browser" package.json property.