I need to exclude from my build file ending/containing
.js.map
and
.js.uncompressed.js
I am trying using some regex with no success
ignore: function(t) {
return /\.js.map$/.test(t)
},
miniExclude: function(t) {
return /\.js.map$/.test(t)
}
I am using DOJO 1.10.
What am I doing wrong here?
var profile = function() {
return {
basePath: "../",
releaseDir: "dist",
releaseName: "build",
optimize: "closure",
action: "release",
layerOptimize: "closure",
copyTests: !1,
stripConsole: "all",
version: "ntv-0.0.0",
cssOptimize: "comments",
mini: !0,
staticHasFeatures: {
"dojo-trace-api": !1,
"dojo-log-api": !1,
"dojo-publish-privates": !1,
"dojo-sync-loader": !1,
"dojo-xhr-factory": !1,
"dojo-test-sniff": !1
},
resourceTags: {
amd: function(t) {
return /\.js$/.test(t)
},
ignore: function(t) {
return /\.js.map$/.test(t)
},
miniExclude: function(t) {
return /\.js.map$/.test(t)
}
},
packages: [{
name: "dojo",
location: "dojo"
}, {
name: "test",
location: "test"
}],
layers: {
"dojo/dojo": {
include: ["dojo/dojo"],
customBase: !0,
boot: !0
},
"test/c": {
include: ["test/c/c"],
customBase: !0,
boot: !1
},
"test/b": {
include: ["test/b/b"],
customBase: !0,
boot: !1
},
"test/a": {
include: ["test/a/a"],
customBase: !0,
boot: !1
}
}
}
}();
First of all, the word "exclude" used in the question isn't quite accurate. These are files that are generated by the build system - they're not files existing in the source to be excluded in the first place.
If you don't want the build to generate source maps, set useSourceMaps: false in your build profile.
As for the *.uncompressed.js files, the build generates these automatically for any module or layer that it minifies. If you really don't want them in the build output, you'll need to remove them afterwards with a command like frank suggested in the comments.
The reason both of these files are included ordinarily is to assist in debugging of built applications. Neither of these files will be downloaded by a browser during normal use; they will only be requested by developer tools.
"asd.js.uncompressed.js".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) //match
"khaslkda.js.map".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) //match
"khaslkda.map".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) // no match
"khaslkda.map.js".match(/.{1,}\.(js\.map|js\.uncompressed\.js)$/g) //no match
I don't really know dojo. But this regex might help you?
edit: I used match.. but it should work with test as well.
Just do like this
/.{1,}\.(js\.map|js\.uncompressed\.js)$/g.test("as-_d.js.uncompressed.js") //true
Related
as a recruitment task I have to copy layout using HTML/CSS and Vanilla JS. I've got a starter pack as a webpack bundle and according to recruiter documentation i have to just install all dependencies using npm install. After creating some layout in css i had to use img tag and here my problem start. First I had error that I'm missing img-loader, so I installed it. Now i can't see image but only alt attribute text.
this is my webpack.config.js for file-loader and img-loader:
{
test: /\.(jp?g|png|gif|svg)$/i,
use: [
{
loader: "file-loader",
options: {
name: "img/[name].[ext]",
},
},
{
loader: "img-loader",
options: {
enabled: isProduction,
gifscale: {
interlaced: false,
},
mozjpeg: {
progressive: true,
arithmetic: false,
},
optipng: false,
pngquant: {
floyd: 0.5,
speed: 2,
},
svgo: {
plugins: [{ removeTitle: true }, { covertPathData: false }],
},
},
},
],
},
here is file structure: file structure
I tried installing all dependencies step by step, changing config and I searched internet across. Unfortunately i couldn't find any solution.
Our project in company uses .js files and eslint is used for formatting. now we are transforming our app slowly to use .ts and .tsx files so I enabled prettier formatting in .ts and .tsx files only but before we use prettier we configured special rules for typescript files in eslint as following :
overrides: [
// Match TypeScript Files
// =================================
{
files: ['**/*.{ts,tsx}'],
// Parser Settings
// =================================
// allow ESLint to understand TypeScript syntax
// https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/lib/shared.js#L10
parser: '#typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
},
// Extend Other Configs
// =================================
extends: [
'airbnb',
'plugin:#typescript-eslint/recommended',
'plugin:import/typescript',
],
rules: {
...rules,
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'#typescript-eslint/space-before-blocks': 'error',
'#typescript-eslint/no-unused-vars': 'error',
'#typescript-eslint/explicit-function-return-type': 'error',
'#typescript-eslint/no-unsafe-return': 'warn',
'#typescript-eslint/padding-line-between-statements': [
'error',
{
blankLine: 'always',
prev: ['interface', 'type'],
next: '*',
},
],
'#typescript-eslint/member-delimiter-style': [
'error',
{
multiline: {
delimiter: 'none',
requireLast: false,
},
singleline: {
delimiter: 'comma',
requireLast: false,
},
},
],
'#typescript-eslint/type-annotation-spacing': 'error',
},
and in .prettierrc file I did the following :
{
"semi": true,
"singleQuote": true,
"printWidth": 100,
"arrowParens": "always",
"tabWidth": 2,
"trailingComma": "es5",
"bracketSameLine": false,
"bracketSpacing": true
}
so prettier for example adds semicolon at end of each line while this rule in .eslint
'#typescript-eslint/member-delimiter-style': [
'error',
{
multiline: {
delimiter: 'none',
requireLast: false,
},
singleline: {
delimiter: 'comma',
requireLast: false,
},
},
doesn't require the line to end with semicolon when declaring types and interface and many other rules conflicts also in eslint when adding multilpe empty lines in file it should show error so how I can do that with prettier?
You may need to change your default formatter for vscode to eslint. You can install the eslint extension and prettier Eslint.
If you are on mac this can be achieved by going to:
Code -> Preferences -> Settings -> Search for Default formatter -> change it to Eslint (dbaeumer.vscode-eslint).
You may also need to change your default formatter. You can achieve this by right-clicking in your screen -> Click on format document with.. -> configure default formatter
There's answered question which in my opinion doesn't actually answers the question, on the difference between extends: [] vs plugins: [] in ESLint.
In my case, i just used extends section:
extends: [
'plugin:#typescript-eslint/recommended',
],
plugins: [],
rules: {
'#typescript-eslint/explicit-function-return-type': [
'error',
{
allowExpressions: true,
},
],
}
As you can see, i just used predefined config from plugin:#typescript-eslint/recommended and also overwritten #typescript-eslint/explicit-function-return-type rule in rules: {} section. But why do we need this PLUGINS section then? If everything works without it? What do i miss?
You have done it correctly.
For your example, there are 2 ways to do add typescript-eslint...
1st way:
{
parser: "#typescript-eslint/parser",
parserOptions: { sourceType: "module" },
plugins: ["#typescript-eslint"],
extends: [],
rules: {
"#typescript-eslint/explicit-function-return-type": [
"error",
{
allowExpressions: true
}
]
}
}
2nd way:
{
plugins: [],
extends: ["plugin:#typescript-eslint/recommended"],
rules: {
"#typescript-eslint/explicit-function-return-type": [
"error",
{
allowExpressions: true
}
]
}
}
The difference is...
1st way:
parser, parserOptions and plugins are manually added,
Only #typescript-eslint/explicit-function-return-type is enforced.
2nd way:
plugin:#typescript-eslint/recommended has automatically added parser, parserOptions and plugins.
Recommended typescript rules are added and enforced.
#typescript-eslint/explicit-function-return-type is augmented and enforced.
This is why when you use plugin:#typescript-eslint/recommended, things work normally even if plugins is empty. A well-written plugins/configs allows that to happen.
I am trying to implement the general example illustrated in:
https://dojotoolkit.org/documentation/tutorials/1.10/modules_advanced/
where my directory structure does not match the "default".
/
index.html
js/
lib/
dojo/
dijit/
dojox/
my/
When I run against the development directories, everything works great! Using this config at runtime:
<script>
var dojoConfig = {
baseUrl: "/lib/_site/js/",
tlmSiblingsofDojo: false,
async: 1,
hasCache: {
// these are the values given above, not-built client code may test for these so they need to be available
"dojo-built": 1,
"dojo-loader": 1,
"dojo-undef-api": 0,
dom: 1,
"host-browser": 1,
// Disable deferred instrumentation by default in the built version.
"config-deferredInstrumentation": 0,
// Dojo loader has built-in "has" api. Since dojoConfig is used
// by Dojo loader, we can set the default here.
"dojo-has-api": 1,
// default
"config-selectorEngine": "lite",
"esri-featurelayer-webgl": 0,
"esri-promise-compatibility": 0,
"esri-promise-compatibility-deprecation-warnings": 1
},
packages: [
{
name: "dojo",
location: "lib/dojo"
},
{
name: "dijit",
location: "lib/dijit"
},
{
name: "dojox",
location: "lib/dojox"
},
{
name: "dstore",
location: "lib/dstore"
},
{
name: "dgrid",
location: "lib/dgrid"
},
{
name: "esri",
location: "lib/esri"
},
{
name: "moment",
location: "lib/moment",
main: "moment"
},
{
name: "my",
location: "my",
main: "app"
}
]
};
</script>
<script src="~/lib/_site/dist/js/lib/dojo/dojo.js"></script>
Dojo correctly locates "my" and the other "libs". But if I try to do an optimized custom build for production, everything works the same except the "my" directory is copied to the "lib" directory, but dojo is still looking for it where it should be?
The output directories look like:
/
index.html
js/
lib/
dojo/
dijit/
dojox/
my/
I am using this profile to build the optimized package..
*
* Based on the dojo-boilerplate
* https://github.com/csnover/dojo-boilerplate
* and https://github.com/tomwayson/esri-slurp-example
*
* Please refer to the Dojo Build tutorial for more details
* http://dojotoolkit.org/documentation/tutorials/1.10/build/
* Look to `util/build/buildControlDefault.js` for more information on available options and their default values.
*/
var profile = {
optimizeOptions: {
languageIn: "ECMASCRIPT6",
languageOut: "ECMASCRIPT5"
},
// `basePath` is relative to the directory containing this profile file; in this case, it is being set to the
// src/ directory, which is the same place as the `baseUrl` directory in the loader configuration.
basePath: "./js/",
tlmSiblings:false,
action: "release",
optimize: "closure", // requires Java 6 or later: http://code.google.com/p/closure-compiler/wiki/FAQ
layerOptimize: "closure",
useSourceMaps: false,
cssOptimize: "comments",
copyTests: false,
internStrings: true,
mini: true,
// The default selector engine is not included by default in a dojo.js build in order to make mobile builds
// smaller. We add it back here to avoid that extra HTTP request. There is also an "acme" selector available; if
// you use that, you will need to set the `selectorEngine` property in index.html, too.
selectorEngine: "lite",
// Strips all calls to console functions within the code. You can also set this to "warn" to strip everything
// but console.error, and any other truthy value to strip everything but console.warn and console.error.
// This defaults to "normal" (strip all but warn and error) if not provided.
stripConsole: "none",
// dojoBootText: "require.boot && require.apply(null, require.boot);",
insertAbsMids: 0,
// If present and truthy, instructs the loader to consume the cache of layer member modules
noref: true,
// A list of packages that will be built. The same packages defined in the loader should be defined here in the
// build profile.
packages: [
// "app" is a sample path for your application
// set this accordingly
{
name: "my",
location: "my"
},
{
name: "dojo",
location: "lib/dojo"
},
{
name: "dijit",
location: "lib/dijit"
},
{
name: "dojox",
location: "lib/dojox"
},
{
name: "dstore",
location: "lib/dstore"
},
{
name: "dgrid",
location: "lib/dgrid"
},
{
name: "esri",
location: "lib/esri"
},
{
name: "moment",
location: "lib/moment",
main: "moment",
trees: [
// don"t bother with .hidden, tests, min, src, and templates
[".", ".", /(\/\.)|(~$)|(test|txt|src|min|templates)/]
],
resourceTags: {
amd: function (filename, mid) {
return /\.js$/.test(filename);
}
}
}
],
// Any module in an application can be converted into a "layer" module, which consists of the original module +
// additional dependencies built into the same file. Using layers allows applications to reduce the number of HTTP
// requests by combining all JavaScript into a single file.
layers: {
// This is the main loader module. It is a little special because it is treated like an AMD module even though
// it is actually just plain JavaScript. There is some extra magic in the build system specifically for this
// module ID.
"dojo/dojo": {
// By default, the build system will try to include `dojo/main` in the built `dojo/dojo` layer, which adds
// a bunch of stuff we do not want or need. We want the initial script load to be as small and quick to
// load as possible, so we configure it as a custom, bootable base.
boot: true,
customBase: true,
include: [
"dojo/domReady",
/** enforce some modules loading */
/** not included because dom is -1 */
"dojo/_base/browser",
"esri/core/request/script",
// esri stuff for 3D maps
"esri/portal/support/layersCreator",
"esri/views/3d/layers/VectorTileLayerView3D"
]
// You can define the locale for your application if you like
// includeLocales: ["en-us"]
},
"esri/identity/IdentityManager": {
include: [
"esri/identity/IdentityManager"
]
},
"esri/views/MapView": {
include: [
"esri/views/MapView",
"esri/views/2d/layers/GraphicsLayerView2D",
"esri/views/2d/layers/FeatureLayerView2D",
"esri/views/2d/layers/TiledLayerView2D"
],
exclude: [
"esri/widgets/support/widget"
]
},
"esri/views/SceneView": {
include: [
"esri/views/SceneView",
"esri/layers/graphics/controllers/I3SOnDemandController",
"esri/layers/SceneLayer",
"esri/views/3d/layers/ElevationLayerView3D",
"esri/views/3d/layers/FeatureLayerView3D",
"esri/views/3d/layers/SceneLayerView3D",
"esri/views/3d/layers/TiledLayerView3D"
],
exclude: [
"esri/widgets/support/widget"
]
},
"esri/WebMap": {
include: [
"esri/WebMap"
]
},
"esri/WebScene": {
include: [
"esri/WebScene"
]
},
"esri/layers/VectorTileLayer": {
include: [
"esri/layers/VectorTileLayer"
]
},
"esri/views/2d/layers/VectorTileLayerView2D": {
include: [
"esri/views/2d/layers/VectorTileLayerView2D"
],
exclude: ["esri/views/MapView"]
},
"esri/views/2d/layers/support/FeatureLayerView2DWebGL": {
include: [
"esri/views/2d/layers/support/FeatureLayerView2DWebGL"
],
exclude: ["esri/views/MapView"]
},
"esri/core/workers/WorkerConnection": {
include: [
"esri/core/workers/WorkerConnection"
]
},
"esri/views/vectorTiles/WorkerTileHandler": {
include: [
"esri/views/vectorTiles/WorkerTileHandler"
]
},
"esri/widgets/support/widget": {
include: [
"esri/widgets/support/widget"
]
}
}
I just can't figure out why! I have tried 10thteen variations. I have not tried to copy the "my" directory back to its proper location, as I shouldn't have to!! If I can't figure it out and manual copying does work, I will just add a copy after the dojo build in the process. BTW-Using NPM and grunt.
Any ideas? Your time and expertise are greatly appreciated!!
Cheers!
BTW-Using NPM and grunt.
EDIT: Here is the grunt stuff used to run the custom build.
A quick note on the custom build. I was trying to "bake" a default
profile into the build by defining a "defaultConfig in the build
profile, as it didn't seem to be working. So I hardwired the
dojoConfig as illustrated above. See the Application Build Profile
section of:
https://dojotoolkit.org/documentation/tutorials/1.10/build/index.html
So the contents of my grunt file that matter:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
options: {
force: true
},
any: {
src: ''
}
},
dojo: {
dist: {
options: {
releaseDir: '../dist/js/lib',
}
},
options: {
profile: 'site.profile.js',
dojo: './js/lib/dojo/dojo.js',
load: 'build',
cwd: './',
basePath: './js/'
}
}
});
require('load-grunt-tasks')(grunt, { scope: 'devDependencies' });
require('time-grunt')(grunt);
grunt.registerTask('none', function () { });
grunt.registerTask('default', 'dist');
grunt.registerTask('my-dojo', function () {
grunt.config('clean.any.src', ['./dist/js/lib']);
grunt.task.run('clean:any');
grunt.task.run('dojo');
grunt.config('clean.any.src', ['./dist/js/lib/**/*.uncompressed.js']);
grunt.task.run('clean:any');
});
};
As mentioned it copies everything to the releaseDir, including "my", where it should end up in ./dist/js.
I come from a Java/Maven background where you would create WAR files to deploy. Maven provides the ability to "filter" files during the build and replace variables at build time with targeted information for the environment you're deploying to.
Now I am working in Node.js and I was wondering if there's a similar facility and best practice you can use in Node.js whereby I could minify my javascript into a single file but at the same time filter variables respective to the environment I'm deploying to.
For instance, there's an app_name config that I'd like to be environment specific:
exports.config = {
app_name : ['$APPNAME-$ENV'],
license_key : 'xxx',
logging : {
level : '$DEBUG_LEVEL'
}
};
So I'd like to be able to update all the $ variables above with environment specific variables into a separate minified JS file. It seems like I'd have to copy the files into a staging area, do a string replace on the variables and then minify. Does that seem reasonable or are there any recommendations on how to best accomplish this in the Node world?
Here's what I ended up doing with GruntJS to accomplish what was talked about above (clean, copy, string-replace, JSHint, and Google CC to minify). I posted a more complete reading of this here for those interested in a deeper dive.
(function () {
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: ["dist"],
copy: {
build: {
files: [
{src: ['./**/*.js', './*.json', './stackato.yml', './README.md', './nunit.js', './test/**/*', '!./dist/**/*', '!./node_modules/**/*', '!./Gruntfile.js'], dest: 'dist/'}
]
}
},
'string-replace': {
dev: {
files: {
"dist/": ["newrelic.js", "stackato.yml", "package.json"]
},
options: {
replacements: [
{
pattern: '$APPNAME',
replacement: "services-people"
},
{
pattern: '$VERSION',
replacement: "1.0.6"
},
{
pattern: 'server.js',
replacement: "server.min.js"
},
{
pattern: '$ENV',
replacement: "DEV"
},
{
pattern: '$PDS_PWD',
replacement: ""
},
{
pattern: '$INSTANCES',
replacement: "1"
},
{
pattern: '$NEWRELIC_TRACE_LVL',
replacement: "trace"
}
]
}
},
prod: {
files: {
"dist/": ["newrelic.js", "stackato.yml", "package.json"]
},
options: {
replacements: [
{
pattern: '$APPNAME',
replacement: "services-people"
},
{
pattern: '$VERSION',
replacement: "1.0.6"
},
{
pattern: 'server.js',
replacement: "server.min.js"
},
{
pattern: '$ENV',
replacement: "prod"
},
{
pattern: '$PDS_PWD',
replacement: ""
},
{
pattern: '$INSTANCES',
replacement: "2"
},
{
pattern: '$NEWRELIC_TRACE_LVL',
replacement: "info"
}
]
}
}
},
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
strict: true,
globals: {
jQuery: true
},
ignores: ['dist/test/**/*.js']
},
files: ['Gruntfile.js', 'dist/**/*.js']
},
nodeunit: {
all: ['dist/test/*-tests.js']
},
'closure-compiler': {
build: {
closurePath: '.',
js: 'dist/**/*.js',
jsOutputFile: 'dist/server.min.js',
maxBuffer: 500,
options: {
compilation_level: 'ADVANCED_OPTIMIZATIONS',
language_in: 'ECMASCRIPT5_STRICT',
debug: false
// formatting: 'PRETTY_PRINT'
}
}
}
});
grunt.loadNpmTasks('grunt-closure-compiler');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-nodeunit');
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['clean', 'copy:build', 'string-replace:dev', 'jshint', 'closure-compiler:build']);
grunt.registerTask('prod', ['clean', 'copy:build', 'string-replace:prod', 'jshint', 'closure-compiler:build']);
};
})();
On the CLI, you can just use "grunt" to spin up the DEV version or "grunt prod" to build the PROD version.