I'm trying to generate istanbul coverage reports for my react components, using (webpack/karma). But the generated report shows the code after transpile and full of (necessary) code.
Is there a way to view before transpiling JSX code in the report or at least only the real application code?
I am using a istanbul-instrumenter as a postLoader in my karma.conf.js:
webpack: {
postLoaders: [ {
//delays coverage til after tests are run, fixing transpiled source coverage error
test: /\.jsx$/,
exclude: /(test|node_modules|bower_components)\//,
loader: 'istanbul-instrumenter' }
]
}
I just solved it by changing from istanbul-instrumenter-loader to babel-istanbul-instrumenter-loader.
Follow the config needed:
preLoaders: [
// transpile and instrument only testing sources with babel-istanbul
{
test: /.jsx?$/,
loader: 'babel-istanbul',
include: [
path.resolve(__dirname, "/src/"), // My tests are under src folder :(
],
query: {
cacheDirectory: true
}
}
]
Related
I've been using Webpack and have found it great for bundling, polyfilling and all sorts of other functions for Javascript, however I wondered if there was a known loader / NPM script that automatically compiles designated .scss files into one.
I have previously used the sass-loader, extract-css plugin to take SCSS out of components and bundle them into the final dist file which is fine for web apps. However, a lot of my day to day work is spent working on traditional websites, so it's often not generated via components / modules.
What I'm looking for, is anytime I save an .scss file, if this is included within my entry points / rules, it automatically compiles all .scss files into a dist/styles.css sheet.
I've had a look online and Gulp seems to offer this, but it looks like Webpack already does 90% of what Gulp offers so ideally would want to keep this all in Webpack.
Thanks in advance
import the scss file on your entry point like this import './style.scss';.
Install mini-css-extract-plugin.
Then add this to your webpack config
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [
{
test: /\.(sc|c)ss$/,
use: [
// { loader: 'style-loader' },
{
loader: MiniCssExtractPlugin.loader, // extract css to a single file
options: {
publicPath: '../',
hmr: false
}
},
{
loader: 'css-loader', options: {
sourceMap: false
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: false,
plugins: [
require('autoprefixer')
]
}
},
{
loader: 'sass-loader', options: { sourceMap: false }
}
],
exclude: /node_modules/
}
],
},
I'm fairly new to webpack, and when compiling my code I came across this error.
ERROR in Error: Child compilation failed:
Module build failed (from ../node_modules/html-loader/index.js):
Error: Line 539: Unexpected identifier
And this is the line that its referring too.
return `background: linear-gradient(to bottom right, ${this.gradientStart}, ${this.gradientEnd});`
Is it possible to allow Template Strings in Webpack?
This is the inside of my webpack config
const html = {
test: /\.(html)$/,
// exclude: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
interpolate: true,
},
},
],
};
Template strings are a feature of es2015. Webpack does not understand es2015 by default to ensure compatibility with as many legacy devices as possible. You need to use a loader that will transpile es2015 into an older version of javascript. You can use "babel-loader" with the preset webpack environment that has support for many features of modern javascript.
You need to download #babel/core & #babel/preset-env for webpack by running the following command:
npm install --save-dev -D babel-loader #babel/core #babel/preset-env webpack
You need to add the following to your webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
},
I started from a configuration consisting of both webpack 3 and a similarly old babel version. It can be found in the following repo:
https://github.com/konradmi/react-loadable-ssr-code-splitting
I updated both webpack and babel to their latest versions, as well as all the node modules, and migrated the old configuration accordingly. This issue could stem from any of these.
Once I finished migrating, I noticed all the babel plugins traverse my webpack configs files (which are in a separate nested folder) instead of the actual js source files which are properly processed by webpack. (I verified it by doing some logging inside of the babel plugins).
The result is the same regardless of whether I'm using .babelrc or not.
The webpack config files used to be at the root of the project as you can see in the repo I linked to above, and now they are inside of a nested "config" folder.
At first I thought it might be the cause of this issue, so I tried the following:
Using path.resolve() in the entry point in order to use an absolute path to make sure it wouldn't possibly be re-interpreted by babel from a string relative to who knows where.
Putting the webpack config files back in the root of the project and building from that path.
In all the variations I've tried - webpack always does its job perfectly, while babel is traversing the wrong files. I'm not even sure how it's possible, babel-loader should be traversing the files which it got from the previous webpack rule, which emitted the correct files.
Here's my current Webpack 4 config files concatenated into 1 file and stripped of irrelevant rules and plugins for your convenience:
const webpack = require('webpack')
const path = require('path')
const webpackNodeExternals = require('webpack-node-externals')
module.exports = {
name: 'server',
target: 'node',
externals: [webpackNodeExternals()],
entry: './src/server.tsx',
output: {
filename: 'bundle.js',
chunkFilename: '[name].js',
path: path.resolve(__dirname, '../build')
},
mode: 'development',
stats: 'verbose',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
[
'#babel/env',
{
'targets': {
'browsers': ['last 2 versions']
},
'debug': false
}
],
'#babel/preset-react'
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-object-assign',
'react-loadable/babel'
]
}
}
]
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
}
]
}
}
I was importing webpack in my server source code, the files babel was going over were webpack imports which I added there in the source code. It couldn't find anything else other than those imports because due to previous rules webpack was exporting a bundle with evals containing the processed code (dev mode settings). The babel plugin wasn't looking for eval statements, so the only thing I could see was the processing of webpack related imports.
I'm trying to build my ES7 source code into a single file and have it transpiled down to ES5 but when I run webpack I still notice code like this in the built bundle
t.exports=class extends n(0).Component{title(){return this.constructor.name}}}
The export of the class means that something is not quite working, this is my relevant webpack config
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
What am I doing wrong?
In order to save someone else the precious few hours I wasted - I was including libraries that contained ES5+ code from node_modules and as obvious as it is the config is ignoring node_modues, so I just had to remove that line.
I followed this tutorial to setup a react project and I thought I nailed it. After installing everything works as it should.
But I have to create a website that uses foundation as a front-end lib. The tutorial I linked above runs server.js when I run npm start but foundation-cli uses the same command for compiling all foundation sass code to css.
At the moment when I run npm start it only runs react and not foundation. How can I run foundation too? can I make it so that it'll automatically run both?
Since you are already using Webpack, I would suggest you to use one of the loaders for it and compile your CSS with it. This one seems like it can do that for you.
This is not tested, but I assume you can add it to your Webpack config like this:
// be sure to install it with
// npm install sass-loader node-sass --save-dev
const path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: [
'./main.js',
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}
}
],
},
resolve: {
modules: [
path.join(__dirname, 'node_modules'),
],
},
};