It is possible to write grunt config files in es6 like this?
//Gruntfile.js
module.exports = function (grunt) {
var arr = [1,2,3];
arr.forEach(val => {
...
});
...
}
One possible way to do this painlessly is to use Babel's babel-register module like this:
Installation:
npm install babel-register --save-dev
.babelrc:
{
presets: ["es2015"]
}
Gruntfile.js:
require('babel-register')
module.exports = require('./Gruntfile.es').default
Gruntfile.es
export default function(grunt) {
grunt.initConfig({})
}
GruntJS is a javascript based application. It runs under the node/iojs process and adheres to the capabilities of that environment. If you use iojs or a node version that supports these features, then yes, its possible.
Related
I am currently working on migrating an app from CRA to Next.js. Eslint was working beautifully when using CRA (eslint works out-of-the-box).
I want to use the same CRA linting rules in the Next.js app so I installed eslint-config-react-app. I followed the instructions as provided on the NPM page: https://www.npmjs.com/package/eslint-config-react-app:
npm install --save-dev eslint-config-react-app #typescript-eslint/eslint-plugin#^4.0.0 #typescript-eslint/parser#^4.0.0 babel-eslint#^10.0.0 eslint#^7.5.0 eslint-plugin-flowtype#^5.2.0 eslint-plugin-import#^2.22.0 eslint-plugin-jsx-a11y#^6.3.1 eslint-plugin-react#^7.20.3 eslint-plugin-react-hooks#^4.0.8
create the .eslintrc.json file with the following content:
{ "extends": "react-app" }
However, the linting is not showing up neither in the development console nor in the browser console.
Thanks!
Ok so I found the solution.
I wanted the eslint output to show up in the console when saving edits to a file directly (just like with CRA). Initially, I did not realize that Next.js has no eslint plugin/loader specified in their webpack config so I extended theirs by adding my own. Now everything works as expected, just like it did when using CRA.
I actually used (although slightly modified) CRA's config for the eslint-webpack-plugin plugin. If anyone else wants to have an eslint setup in Next.js similar to CRA, add the following to your next.config.js file:
const path = require('path');
const fs = require('fs');
const ESLintPlugin = require('eslint-webpack-plugin')
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
webpack(config) {
config.plugins.push(new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
eslintPath: require.resolve('eslint'),
context: resolveApp('src'),
cache: true,
cacheLocation: path.resolve(
resolveApp('node_modules'),
'.cache/.eslintcache'
),
// ESLint class options
cwd: resolveApp('.'),
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {},
},
}))
return config
}
}
Note, that when using the above you will need to install eslint-config-react-app and its dependencies (see: https://www.npmjs.com/package/eslint-config-react-app).
Finally, note that since Next.js only renders (compiles) a page when it is needed in development, eslint will only run on a page when it is displayed in the browser as pointed out here: https://github.com/vercel/next.js/issues/9904. This makes adding the following script to package.json as suggested by Roman very useful if you want to do a "full-scan" of your project.
"lint": "eslint ."
You can add a command like this in the scripts section of your package.json:
"lint": "eslint ."
And then you can check your eslint results by running:
npm run lint
I'm trying to import a package into my Rails 6 project – I'm on Rails 6.0.3.4 and webpacker 5.2.1 gem.
The package is installed yarn add #shopify/react-form
It's imported into the file import {useForm, useField} from '#shopify/react-form';
Now after running ./bin/webpack-dev-server
I get this:
ERROR in ./node_modules/#shopify/react-form/build/esm/validation/validator.mjs 35:25-32
Can't import the named export 'isEmpty' from non EcmaScript module (only default export is available)
And few more of the same error but different file names.
I read on another issue that adding a new rule to webpack would fix the issue, so I followed the instructions on the webpacker README:
The thing is I don't have /config/webpack/base.js, I created on anyway and created a rules directory in side the /config/webpack/ directory, so my base.js looks like this:
// /config/webpack/base.js
const { webpackConfig, merge } = require('#rails/webpacker')
const fixConfig = require('./rules/fix')
module.exports = merge(webpackConfig, fixConfig)
and the fix looks like this:
// /config/webpack/rules/fix.js
module.exports = {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
}
I need help/guidance to figure out hot to solve this. TIA!
I managed to fix the error, this article guided me to figure out how to merge a new rule into webpack config.
Here is what environment.js looks right now:
// /config/webpack/environment.js
const { environment } = require('#rails/webpacker')
environment.config.merge({
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
})
module.exports = environment
Before it was:
const { environment } = require('#rails/webpacker')
module.exports = environment
I ended up deleting base.js and fix.js.
So, I have installed single page app based on npm/bower/grunt/angular.js
In the root I have gruntfile.js with this code
module.exports = function(grunt) {
var gtx = require('gruntfile-gtx').wrap(grunt);
gtx.loadAuto();
var gruntConfig = require('./grunt');
gruntConfig.package = require('./package.json');
gtx.config(gruntConfig);
// We need our bower components in order to develop
gtx.alias('build:standardversion', [
'compass:standardversion',
...
]);
gtx.finalise();
So now I have to install grunt-cache-bust plugin from here https://github.com/hollandben/grunt-cache-bust
I installed it with npm and now I don't know where to write a task for this.
Please tell me or give me a link to understand it properly
In the directory containing GruntFile.js, create a "grunt" folder if it doesn't exist.
In the "grunt" folder, create a file "cacheBust.js"
sample cacheBust.js:
module.exports = {
assets: {
files: {
src: ['index.html', 'contact.html']
}
}
}
To run cacheBust from the command line: "grunt cacheBust"
I am trying to add custom task to a sails js application. accroding to the documentation I create files in the following way.
tasks/register/test.js
module.exports = function (grunt) {
grunt.registerTask('test', ['mochaTest']);
};
tasks/config/mochaTest.js
module.exports = function(grunt) {
grunt.config.set('mochaTest', {
test: {
options: {
reporter: 'spec',
captureFile: 'results.txt', // Optionally capture the reporter output to a file
quiet: false, // Optionally suppress output to standard out (defaults to false)
clearRequireCache: false // Optionally clear the require cache before running tests (defaults to false)
},
src: [
'test/bootstrap.test.js',
'test/unit/**/*.js'
]
}
});
grunt.loadNpmTasks('grunt-mocha-test');
};
I have written test cases inside test/unit folder. I can run these test using grunt mochaTest command. But using 'sails lift --test' command does not run the test cases. instead it just run the sails application. I also tried the following command. ()
NODE_ENV=test sails lift
It also does not run the test cases. It just run the sails application. (http://sailsjs.org/documentation/concepts/assets/task-automation)
What am I missing here ?
Modify the file "tasks/register/default.js" to have the following code:
module.exports = function (grunt) {
grunt.registerTask('default', ['compileAssets', 'linkAssets', 'grunt-mocha-test', 'watch']);
};
then just launch the app with "sails lift"
In grunt-contrib-stylus there is a import option:
import
Type: Array
Import given stylus packages into every compiled .styl file, as if you wrote '#import '...' in every single one of said files.
options: {
compress: false,
use: [ require('kouto-swiss') ],
import: [ 'kouto-swiss' ]
},
How can I do the same thing with lesshat in grunt-contrib-less ?
Thanks
Since release 2 you can create plugins for Less easily. Thanks to Implementing preprocessing plugins you can create preprocess plugins too.
The preprocess plugin enable you to inject Less code before processing:
LesshatProcessor.prototype = {
process : function (src, extra) {
var injected = '#import "' + path.resolve(__dirname, '../') + '/node_modules/lesshat/build/lesshat.less";\n';
var ignored = extra.imports.contentsIgnoredChars;
var fileInfo = extra.fileInfo;
ignored[fileInfo.filename] = ignored[fileInfo.filename] || 0;
ignored[fileInfo.filename] += injected.length;
return injected + src;
}
};
I have created a Lesshat plugin already: https://github.com/bassjobsen/less-plugin-lesshat. After installing this plugin by running npm install less-plugin-lesshat and then your are able to run: lessc file.less --lesshat.
You can also use this plugin together with grunt-contrib-less:
grunt.initConfig({
less: {
options: {
plugins: [
new (require('less-plugin-lesshat'))()
]
},
files: {'css/test.css' : 'less/test.less'}
}
)};
Notice that you should install the latest version of Less with grunt-contrib-less until Less has updated the version number (and grunt-contrib-less uses that version).
To use the plugin now:
run npm install grunt-contrib-less
Navigate to node_modules/grunt-contrib-less/
Remove node_modules/less
Download and unzip the latest version of Less at https://github.com/less/less.js/archive/master.zip
run npm install ./less.js