I'd like to generate sourcemaps for jsx files that are transpiled with babelify and browserify. It seems that some sourcemaps are being generated as a base64 encoded comment at the bottom of my output file, but stacktraces do not honor them.
My grunt task looks like the following:
browserify: {
options: {
browserifyOptions: {
debug: true
},
debug: true,
transform: ['babelify']
},
app: {
src: 'src/app.jsx',
dest: 'dist/app.js'
}
},
This works for me:
browserify: {
dev: {
options: {
browserifyOptions: {
debug: true
},
transform: [["babelify"]]
},
files: {
"dist/bundle.js": "src/index.js"
}
}
},
Going to need to use grunt-exorcise to extract the map from the bundle.
Browserify recommends it
browserify: {
options: {
browserifyOptions: {
debug: true
},
debug: true,
transform: ['babelify']
},
app: {
src: 'src/app.jsx',
dest: 'dist/app.js'
}
},
exorcise: {
app: {
options: {},
files: {
'dist/app.js.map':['dist/app.js'],
}
}
},
Related
I have 1 app using the vue pwa plugin, it works great.
The vuejs config for the app looks like this:
const WebpackNotifierPlugin = require('webpack-notifier')
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
sass: {
implementation: require('sass')
}
}
},
transpileDependencies: [
'vuex-module-decorators',
'vuex-persist'
],
pwa: {
name: 'MyApp',
themeColor: '#000000',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'dev/sw.js',
// ...other Workbox options...
}
},
configureWebpack: {
devServer:{
historyApiFallback: true,
},
plugins: [
new WebpackNotifierPlugin(),
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: 3,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('#', '')}`;
},
},
},
},
},
},
}
I have another app, exactly the same, vue2, beufy etc etc.. i installed the same stuff via the vue pwa plugin and the config looks exactly the same but when i run build it says it cannot find the sw.js file:
Error: ENOENT: no such file or directory, open 'dev/sw.js'
I have created a uber basic vue app which does the same thing here: https://github.com/johndcarmichael/vue-pwa-sw-not-found
Has anyone else got this issue, and how did you resolve it?
You are not having dev/sw.js in your project, as you set in swSrc. InjectManifest means take this sw.js source file and write precache manifest into it, producing the final service-worker.js file.
I configured my PWA manifest.json in vue.config.js, shown below. How can I configure the PWA icons to refer to the images inside the assets/ folder?
module.exports = {
pwa: {
manifestOptions: {
name: process.env.VUE_APP_APP_NAME,
short_name: process.env.VUE_APP_SHORT_NAME,
start_url: process.env.VUE_APP_START_URL,
display: 'standalone',
theme_color: process.env.VUE_APP_PRIMARY_COLOR,
background_color: process.env.VUE_APP_BACKGROUND_COLOR,
icons: [
{
src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
sizes: "192x192",
type: "image/png"
},
{
src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
sizes: "512x512",
type: "image/png"
}
]
}
}
}
When I run my app, I get this error :
http://localhost:8080/src/assets/company/logo-512x512.png (Download error or resource isn't a valid image)
I don't understand why /src is set in the URL.
Use static assets from the public directory (e.g., public/img/company/logo-192x192.png and public/img/company/logo-512x512.png), which are copied as-is to the build output. Then your vue.config.js would reference them like this:
// vue.config.js
module.exports = {
pwa: {
manifestOptions: {
icons: [
{
src: `/img/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
sizes: "192x192",
type: "image/png"
},
{
src: `/img/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
sizes: "512x512",
type: "image/png"
}
]
}
}
}
In a Nuxt.js project, I've npm installed less and less-loader so I can have dynamic CSS for iView. However, when I try to overwrite iView's global variables, an error appears: "Inline JavaScript is not enabled. Is it set in your options?"
In Nuxt.js docs (https://nuxtjs.org/api/configuration-build#loaders) they state they have a preconfigured less loader. less: {}, so I tried...
less: {
javascriptEnabled: true
}
and...
less: {
options: {
javascriptEnabled: true
}
}
and even...
less: {
dev: {
options: {
javascriptEnabled: true
}
}
}
Nuxt.js seems to ignore all of this. So how should I configure it in Nuxt.js?
Add this to your nuxt.config.js
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
/*
** You can extend webpack config here
*/
loaders: {
less: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
you can do it
build: {
/*
** You can extend webpack config here
*/
extend(config, { loaders: { less } }) {
less.javascriptEnabled = true
}
}
For Nuxt 3 with typescript, adding this on nuxt.config.ts file worked for me
{ ....
vite: {
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
}
}
I try to configure my environment to run tests on node.
This my my webpack.config.test.js
const serverConfig = {
module: {
loaders: [
{test: /\.tsx?$/, loader: 'ts-loader' }
]
},
target: 'node',
externals:[nodeExternals()],
resolve: {
extensions: ['.ts', '.tsx', '.js']
}
};
module.exports = serverConfig;
karma.config.js
// Karma configuration
// Generated on Tue Jun 27 2017 07:20:43 GMT-0500 (Hora est. PacĂfico, SudamĂ©rica)
const webpackConfig=require('./config/webpack/webpack.test');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha','es6-shim'],
plugins:[
require("karma-es6-shim"),
'karma-webpack',
'karma-jsdom-launcher',
'karma-mocha',
'karma-spec-reporter',
'karma-jsdom-launcher',
'karma-coverage',
'karma-chrome-launcher',
"karma-phantomjs-launcher",
'karma-htmlfile-reporter'
],
files: [
'test/**/*.spec.ts'
],
coverageReporter: {
webpackMiddleware: {
stats: "errors-only"
},
dir: 'build/coverage/',
reporters: [
{ type: 'html' },
{ type: 'text' },
{ type: 'text-summary' }
]
},
// list of files to exclude
exclude: [
],
preprocessors: {
'test/**/*.spec.ts':["webpack","coverage"]
},
webpack:webpackConfig,
reporters: ['spec','progress','html'],
htmlReporter: {
outputFile: 'tests/units.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: 'A sample project description',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: true
},
// web server port
port: 9876,
colors: true,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
}
test1
import { DBCONFIG } from './../src/config/db.config';
import { CONEXION } from './../src/config/database/mongo';
import { expect } from 'chai';
describe("#DATABASE",()=>{
it("Esta conectado",()=>{
CONEXION("hola",DBCONFIG.MONGO_URL_LOCAL)
.then(()=>{
expect(1).to.be("1");
})
.catch((e)=>{
expect(1).to.be(e);
})
})
});
test2
import { expect } from 'chai';
describe("#User",()=>{
it("use2r",()=>{
expect(1).to.equal("1");
})
})
When I run mocha + webpack with mocha-webpack, there is no problem the tests are running.
package.json
"test-server": "mocha-webpack --timeout 1000 --webpack-config config/webpack/webpack.test.js test/**/*.spec.ts",
"test":"karma start"
When I do it from karma depending on which browser I use to display the messages I throw similar errors, when I throw it with jsdom or PhantomJS I throw the following
require is not defined o Cannot find
Looking in git, the only answer that solved the problem, is to put in the processors of karma the following.
'test/**/*.spec.ts':["webpack","coverage"]
It is the same way and I have varied, but the error continues.
I have a LESS file (test.less) with the following class:
.bad_class {
color: #fff
}
I linting and compiling my files with the grunt-recess plugin.
My Grunt options for recess are:
recess: {
options: {
noUnderscores: true
},
test: {
files: {
'assets/css/test.css': [
'assets/less/test.less'
]
}
}
}
When I run recess, it doesn't fail.
I tried without setting the noUnderscores option at all - didn't work.
I even tried setting noUnderscores: false, but that didn't work.
What's am I doing wrong?
Try this
recess: {
build: {
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compile: true,
compress: true,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
}
}
If above is not working try the below code
recess: {
build: {
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compress: false,
noUnderscores: false,
noIDs: false,
zeroUnits: false
}
},
compliefile:{
src: [ 'assets/less/test.less' ],
dest: 'assets/css/test.css',
options: {
compile: true
}
}
}