I am currently using webpack and running a test that goes through node_modules and excludes one specific module.
However, i am struggling with the regular expression as i am trying it on the regex checker, and it works fine. However, on the webpack it fails.
Example: https://regex101.com/r/rO4jD0/34
^node_modules\/(?!example).*
On the webpack itself, i am writing the following:
vendor: {
test: /^[\\/]node_modules[\\/](?!example).*[\\/]/,
// test: /^[\\/]node_modules[\\/](?!example)[\\/].*/,
// test: /^node_modules\/(?!example).*/,
name: 'vendor',
chunks: 'all',
}
The tests are examples of the tests i've run so far but unfortunately all of them failed.
As an FYI - this works fine but it doesnt exclude that one example folder.
test: /[\\/]node_modules[\\/]/,
Is this to split out a large vendor module into its own bundle? Here is how I did that:
vendor: {
name: 'vendor',
test: /[\\/]node_modules[\\/]((?!(example.js|slick-carousel)).*)[\\/]/,
name: 'vendors',
chunks: 'all'
},
v_example: {
test: /[\\/]node_modules[\\/]((example.js).*)[\\/]/,
name: 'v_example',
chunks: 'all'
},
v_slick: {
test: /[\\/]node_modules[\\/]((slick-carousel).*)[\\/]/,
name: 'v_slick',
chunks: 'all'
}
Related
I'm trying to split my build files in my webpack.config.js file, but my vendors file isn't being created at all. The remaining node_modules, which aren't react or moment files end up in the main.js. An example of a file that goes in main.js is ./node_modules/es-abstract. I put in my regex and filename in a regex checker, and it passes the test. I'm not sure what's going on; any help would be greatly appreciated it.
splitChunks: {
cacheGroups: {
moment: {
test: /[\\/]node_modules[\\/]((moment).*)[\\/]/,
name: 'moment',
chunks: 'all'
},
react: {
test: /[\\/]node_modules[\\/]((react).*)[\\/]/,
name: 'react',
chunks: 'all'
},
vendors: {
test: /[\\/]node_modules[\\/]((?!(moment|react)).*)[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
According to David Gilbertson, SplitChunks default settings only allows for three chunks. To solve this, these settings will need to be added to split chunks: maxInitialRequests: Infinity,
minSize: 0,
I have a Django app and am using Django's i18n module to help translating my strings. For translating JavaScript, I run
python manage.py makemessages -d djangojs
which adds all marked strings to a .po file. This works quite well for all my boring .js files in my static folder. However, we are starting to use webpack to pack some typescript (.tsx files) into a bundle.js file. This file is copied to the static folder after building, so I expected Djangos makemessages to pick up the strings from it as well. However, it seems that the strings are not parsed correctly, because most of the code in bundle.js is simply strings wrapped in eval().
I believe this means that I need webpack to - in addition to the bundle.js file - create a .js file for each .tsx file without all of the eval() nonsense, so that django's makemessages can parse it properly. I have no idea how to do this, however. My current config looks like this
var path = require("path");
var WebpackShellPlugin = require('webpack-shell-plugin');
var config = {
entry: ["./src/App.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
devtool: 'source-map',
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
},
{
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
}]
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
plugins: [
new WebpackShellPlugin({
onBuildEnd:['./cp_to_static.sh'],
dev: false // Needed to trigger on npm run watch
})
]
};
module.exports = config;
So how can I make webpack spit out these files?
Is this the right thing to do, or is there a way to make Django parse bundle.js properly?
Turns out that all of the eval nonsense was generated by webpacks "watch" function. When simply running webpack for building the script, it works as expected
I'm trying to use the grunt-version to bump the version of my PHP WordPress Plugin project. For a long time I tried and tried, but failed.
In my plugin file example.php I have a PHP variable denoting the project version:
public $version = '0.3.4';
I need to match the string so that I can bump the version here too.
I tried:
prefix: 'public\s\$version\s='
As of regex101.com it matches the string completely. The version number portion is dealt with the grunt plugin completely.
But the grunt version::patch says:
Pattern not found in file
Path: example.php
Pattern: /(publics$versions=s)([0-9a-zA-Z\-_\+\.]+)/g
So I modified the pattern to:
prefix: 'public/\s\$version/\s=/\s'
But it's not matching:
Pattern: /(public\/s$version\/s=\/s)([0-9a-zA-Z\-_\+\.]+)/g
Nonetheless, the following pattern is working fine in the same file:
prefix: 'Version:\\s+'
And bumping version nicely in plugin header:
Version: 0.3.4
So I tried:
prefix: 'public \$version =\\s+'
But no luck:
Pattern: /(public $version =\s+)([0-9a-zA-Z\-_\+\.]+)/g
FYI, my Gruntfile declaration is like below:
version: {
pluginVersion: {
options: {
prefix: 'Version:\\s+'
},
src: [
'example.php'
]
},
pluginVariable: {
options: {
prefix: 'public \$version =\\s+'
},
src: [
'example.php'
]
},
packageJson: {
src: [
'package.json'
]
}
},
Edit
And needless to say the default pattern ('[^\\-]version[\'"]?\\s*[:=]\\s*[\'"]') is changing some unwanted versions too. Like:
public $wp_version = '0.3.0';
You can use this regular expression to match it: public\s?\$version\s?=\s?'
(public\\s+\\$version\\s+=\\s+\' escaped)
Demo
For those looking to use this with the style.css and/or plugin files:
version: {
project: {
options: {
release: 'patch',
prefix: '\\s*([^\\w][\'"]?[v|V]{1}ersion[\'"]?\\s*[:=]\\s*[\'"]?)'
},
src: ['package.json', 'style.css']
}
}
make sure you register your task (as per docs)
grunt.loadNpmTasks('grunt-version');
then you can run the task as such
grunt version
I am new to Intern and struggling with trying to get a simple test to run in my environment. I was able to get the tutorial test to run but I've tried to set up a test where the test file is located inside my app directory hierarchy. The module being tested is located here:
sandbox/web/libs/ev/grids/FilterGrid.js
The test file is located here:
sandbox/web/libs/ev/tests/FilterGrid.js
My intern config file is located here:
sandbox/tests/intern.js
My loader and suites objects looks like this:
loader: {
packages: [
{ name: 'dojo', location: 'web/libs/dojo' },
{ name: 'dijit', location: 'web/libs/dijit },
{ name: 'dgrid', location: 'web/libs/dgrid' },
{ name: 'put-selector', location: 'web/libs/put-selector' },
{ name: 'xstyle', location: 'web/libs/xstyle' },
{ name: 'ev', location: 'web/libs/ev' }
]
},
suites: ['ev/tests/FilterGrid'],
When the loader tries to load this, I get:
Defaulting to "console" reporter
ReferenceError: document is not defined
at /home/bholm/Projects/src/sandbox/web/libs/dojo/selector/_loader.js:5:15
at execModule (/home/bholm/Projects/src/sandbox/node_modules/intern/node_module
/dojo/dojo.js:512:54)
at /home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:579:7
at guardCheckComplete (/home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:563:4)
at checkComplete (/home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:571:27)
at onLoadCallback (/home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:653:7)
at /home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:746:5
at fs.js:266:14
at Object.oncomplete (fs.js:107:15)
Does the unit tests using Intern need a DOM document defined??
I also notice that Intern lists dojo2_core as it's dependency. So it's using unreleased code?
Any help with this would be appreciated!
It looks like you’re trying to load some code using the Node.js client that requires a browser environment. This won’t work. You should only load the ev/tests/FilterGrid test suite in a browser. You can do this by modifying your Intern configuration file to look something like this:
define([ 'intern/node_modules/dojo/has' ], function (has) {
var suites = [];
if (has('host-browser')) {
suites.push('ev/tests/FilterGrid');
}
return {
// ...your existing configuration...
suites: suites,
// ...
};
});
Despite using the Dojo build system, my app is still including a large number of javascript files which I would have hoped to be covered by the build.
Here's my build profile:
var profile = (function(){
return {
basePath: "./",
releaseDir: "release",
action: "release",
selectorEngine: "acme",
cssOptimize: "comments.keepLines",
packages:[{
name: "dojo",
location: "dojo"
},{
name: "dijit",
location: "dijit"
},{
name: "dojox",
location: "dojox"
},{
name: "my",
location: "my"
}],
layers: {
"my/admin": {
include: ['dojo/ready', 'dojo/dom', 'dojo/query', 'dojo/request/xhr', 'my/Form', 'my/Tree/Radio']
}
}
};
})();
The app is still including the following JS files on each request: my/Form.js (even though this is listed in the profile), dojo/fx/Toggler.js, dijit/_base.js, dijit/WidgetSet.js, dijit/_base/focus.js, dijit/_base/place.js, dijit/place.js, dijit/_base/popup.js, dijit/popup.js, dijit/BackgroundIframe.js, dijit/_base/scroll.js, dijit/_base/sniff.js, dijit/_base/typematic.js, dijit/typematic.js, dijit/_base/wai.js, dijit/_base/window.js.
my/Tree/Radio extends dijit/Tree, so I'm assuming a lot of the files above are dijit base files that are being loaded automatically by dijit.Tree. But surely the build tool should resolve dependencies like this and include them in the 'built' file?
I am using Dojo 1.8.3.
In dojo/fx, it dynamically looks up the Toggler with the comment
use indirection so modules not rolled into a build
Not sure why, but if you add dojo/fx/Toggler to the include of your build script, it should not make the additional xhr requests.
EDIT: Apparently dijit/Widget does something similar with dijit/_base, so you will want to add that to the includes as well.
http://trac.dojotoolkit.org/ticket/14262