Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Poderia dar uma dica de como instalar o JS Hint no Webpack?

Tentei dar uma olhada na documentação do "jshint-loader - https://www.npmjs.com/package/jshint-loader". Porém por ser primeira experiência não sei se é a melhor opção. Segui a configuração do exemplo de uso, mais não tive suscesso.

6 respostas

Olá. No próprio site que você postou há um trecho de código para ser adicionado diretamente no seu webpack. Geralmente, muitos plugins seguem essa estratégia de cut e paste.

Não funcionou?

Só lembrando que Webpack é para lidar com SPA. Se o seu projeto não é SPA, não faz muito sentido utilizá-lo. Nesse caso, Gulp ou Grunt é mais indicado.

Não funcionou, vou olhar mais profundamente, para ver se me esqueci de algum detalhe. Valeu!

Bom, você pode postar webpack.config.js com a alteração realizada por você, inclusive a mensagem de erro?

const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');

let plugins = [];

if(process.env.NODE_ENV == 'production') {
    plugins.push( new babiliPlugin() );
}

module.exports = {
    entry: './statics/scripts/app.js',
    output: {
        filename: 'ps-mobile-bundle.js',
        path: path.resolve(__dirname, 'arquivos')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ],
        preLoaders: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: "jshint-loader"
            }
        ]
    },
    jshint: {
        camelcase: true,
        emitErrors: false,
        failOnHint: false,
        reporter: function(errors) { console.log(errors) }
    },
    plugins
}

/Mensagem Erro/

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'jshint'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // may apply this only for some modules options: { jshint: ... } }) ] - configuration.module has an unknown property 'preLoaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } Options affecting the normal modules (NormalModuleFactory).

solução!

Olha, eu olhei a documentação e segui igual. Não funcionou! Então, imaginei que a documentação estivesse desatualizada. Pesquisando na internet parece ser esse o caso.

Para solucionar seu script deve estar assim:

const path = require('path');
const babiliPlugin = require('babili-webpack-plugin');

let plugins = [];

if(process.env.NODE_ENV == 'production') {
    plugins.push( new babiliPlugin() );
}

module.exports = {
    entry: './statics/scripts/app.js',
    output: {
        filename: 'ps-mobile-bundle.js',
        path: path.resolve(__dirname, 'arquivos')
    },
    module: {
        rules: [
        // só adicionar essa regra, mais nada a fazer no arquivo de configuração.
            {
                test: /\.js$/, // include .js files
                enforce: "pre", // preload the jshint loader
                exclude: /node_modules/, // exclude any and all files in the node_modules folder
                use: [
                  {
                    loader: "jshint-loader",
                    options: { 
                      camelcase: true, 
                      emitErrors: false, 
                      failOnHint: false
                    } 
                  }
                ]
            },            
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins
}

Mas, você precisa instalar o jshint, pois o loader passará as informações para ele. Então, ainda dentro do seu projeto:

npm install jshint@2.9.5 --save-dev

Sucesso e bom estudo!

OBS: só não esquece de configurar o plugin lendo a documentação dele, pois o jshint não suporta ES6, você terá que adicionar uma flag, e um monte de coisas.

Por exemplo:

 options: { 
  camelcase: true, 
  emitErrors: false, 
  failOnHint: false,
  esversion: 6
}

Veja que indiquei que o jshint deve considerar o ES6 e por ai vai.

Funcionou!!! Muito obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software