I've downloaded the angular I18n repo using bower install angular-i18n which pulls it into my bower_compontents and updates the bower.json file with angular-i18n : 1.5.3, which is expected behavior.
I want to include a specific locale(ex. de-de.js) in my build process so that it gets included along with the other angular scripts, every time I run grunt serve which isn't happening at the moment. Any ideas how this can be achieved?
Thanks.
In my case, I added in my bower file the specific version that i need using the link of the raw version of the file angular-locale_es.js.
bower.json
"dependencies": {
"angular": "^1.5.0",
"angular-mocks": "^1.5.0",
...
"angular-locale_es": "https://raw.githubusercontent.com/angular/bower-angular-i18n/master/angular-locale_es.js",
...
}
In your bower.json you can add an overrides section and specify the i18n script you want to include.
{
"name": "your application",
"version": "1.1.2",
"dependencies": {
"angular": "#1.5.7",
"angular-i18n": "#1.5.7",
"moment": "#2.13.0",
},
"overrides": {
"angular-i18n":{
"main":[
"angular-locale_de-ch.js"
]
},
"moment": {
"main": [
"moment.js",
"locale/de.js"
]
},
}
}
So to answer my own question, if you only want one of the locales you can copy and replace the contents of the de-de.js locale into the main angular-i18n file, which is hassle free and does not require a complicated approach.
However if you have multiple locales and want to make a decision based on a condition, you can set a default locale using this library
https://github.com/lgalfaso/angular-dynamic-locale/
after which all you have to do is add a base location for your locale files(I'm using the CDN for example): tmhDynamicLocaleProvider.localeLocationPattern('https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.5/angular-locale_{{locale}}.js');
check for your condition and pass the locale as $translate.use('de');
Hope that helps!
Related
I'm new the world of automating/testing/bunding with JS and I've got parcel setup for the most part but I noticed that when it builds files, it does not actually save them with the .min.js part in the file name. I'm wondering if theres a way to do this without having to rename the build file manually.
I'm also trying to find a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me
Here's what my package.json looks like
{
"name": "lpac",
"version": "1.3.1",
"description": "",
"dependencies": {},
"devDependencies": {
"parcel": "^2.0.0-rc.0"
},
"scripts": {
"watch": "parcel watch --no-hmr",
"build": "parcel build"
},
"targets": {
"lite-maps": {
"source": ["./path/file1.js", "./path/file2.js", "./path/file3.js"],
"distDir": "./path/build/"
}
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"outputFormat" : "global",
}
I checked out the docs but I couldn't find anything on linting or beautifying with parcel. How can i go about doing that? If you have tutorial links to doing so please also share because resources/tutorials seem scarce for anything other than the basic watching and building files
Unfortunately, there is no out-of-the-box setting that can cause parcel javascript output look like [fileName].[hash].min.js instead of [fileName].[hash].js. The .min.js extension is just a convention to keep output files distinct from source files, though - it has no effect at runtime - and the fact that parcel does automatic content hashing makes it easy enough to tell this. And even though they don't have a .min.js extension, these output files are definitely still minified and optimized by default.
However, if you really, really want this anyways, it's relatively simple to write a Namer plugin for parcel that adds .min.js to all javascript output:
Here's the code:
import { Namer } from "#parcel/plugin";
import path from "path";
export default new Namer({
name({ bundle }) {
if (bundle.type === "js") {
const filePath = bundle.getMainEntry()?.filePath;
if (filePath) {
let baseNameWithoutExtension = path.basename(filePath, path.extname(filePath));
// See: https://parceljs.org/plugin-system/namer/#content-hashing
if (!bundle.needsStableName) {
baseNameWithoutExtension += "." + bundle.hashReference;
}
return `${baseNameWithoutExtension}.min.js`;
}
}
// Returning null means parcel will keep the name of non-js bundles the same.
return null;
},
});
Then, supposing the above code was published in a package called parcel-namer-js-min, you would add it to your parcel pipeline with this .parcelrc:
{
"extends": "#parcel/config-default",
"namers": ["parcel-namer-js-min", "..."]
}
Here is an example repo where this is working.
The answer to your second question (is there "a way to have parcel go through the original source files(the ones that you work on) and lint and beautify them for me") is unfortunately, no.
However, parcel can work well side-by-side with other command line tools that do this do this. For example, I have most of my projects set up with a format command in the package.json, that looks like this:
{
...
"scripts": {
...
"format": "prettier --write src/**/* -u --no-error-on-unmatched-pattern"
}
...
{
You can easily make that command automatically run for git commits and pushes with husky.
I use moment.js in typescript with webpack for create my own java-script client-side component and every things is OK.
Version of used components:
"dependencies": {
"circular-dependency-plugin": "^5.2.2",
"ignore-loader": "^0.1.2",
"moment": "^2.29.1",
"moment-locales-webpack-plugin": "^1.2.0",
"ts-loader": "^9.2.3",
"typescript": "^4.3.5",
"webpack": "^5.45.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^4.0.0-beta.3"
}
For add Persian culture like this example, I must write some code like this:
import * as moment from "moment";
import "moment/locale/fa";
console.log(moment.locale()); // en
moment.locale("fa");
console.log(moment.locale()); // muste be fa
Now i receive this error :
I think extra process that webpack do over .js file and simulate require() method case this problem. I search an find some question like my one, but answers is not usable.what is problem and how can I config webpack for fix this problem.
UPDATE:
After spend many hours in code. I find out that problem can be fix with this: For example for Persian culture in related .js setting file replace ../moment path with moment:
This solution is not god so need help for best way that don't need change in moment source code. I think some things like edit path routing in tsc or webpack config can fix this problem. Any suggestion? Thanks
The version of moment js support for moment.locale() is added # 2.8.0.
As of v2.8.1, moment.locale('en') sets the localization but does not return a moment.
I am using bower-installer to copy files I need from bower_components folder into bower_dist folder. Here is relevant part of bower.json file:
"install": {
"path": "bower_dist"
},
"dependencies": {
"jquery": "~2.1.4",
"bootstrap": "~3.3.4",
"slick.js": "~1.5.5"
},
Now this is creating bower_dist folder and within it folder for each component. The problem is that within slick.js component I have few files (eot, svg, ttf, woff) that I need to have in /slick.js/fonts folder (rather than just /slick.js/ folder).
How do I do this? I've tried specifying special case for eot, svg, ttf and woff, but then that gets applied to all components. Plus I don't want to introduce need to specify all file types (js, css, etc)... rather want to just configure special font type for slick.js. Is this possible to do?
The problem here appears to be that slick.js uses a glob pattern in their bower.json main file array which is not supported...
Globs like js/*.js are not allowed.
You should do the following...
Override the required files for slick.js in your bower.json file (see Install multiple main files and Configurable paths)
"install": {
"base": "bower_dist",
"path": {
"js": "{name}",
"css": "{name}",
"eot": "{name}/fonts",
"svg": "{name}/fonts",
"ttf": "{name}/fonts",
"woff": "{name}/fonts"
},
"sources": {
"slick.js": [
"bower_components/slick.js/slick/slick.min.js",
"bower_components/slick.js/slick/slick.css",
"bower_components/slick.js/slick/slick-theme.css",
"bower_components/slick.js/slick/fonts/slick.eot",
"bower_components/slick.js/slick/fonts/slick.svg",
"bower_components/slick.js/slick/fonts/slick.ttf",
"bower_components/slick.js/slick/fonts/slick.woff"
]
}
}
Substitute bower_components for whatever your bower install directory is.
Follow this pull request.
This proved to be tougher than I thought:
"install": {
"path": "bower_dist",
"sources": {
"slick-carousel": {
"mapping": [
{ "bower_components/slick-carousel/slick/slick.min.js": "slick.min.js" },
{ "bower_components/slick-carousel/slick/slick.css": "slick.css" },
{ "bower_components/slick-carousel/slick/slick-theme.css": "slick-theme.css" },
{ "bower_components/slick-carousel/slick/ajax-loader.gif": "ajax-loader.gif" },
{ "bower_components/slick-carousel/slick/fonts/slick.eot": "fonts/slick.eot" },
{ "bower_components/slick-carousel/slick/fonts/slick.svg": "fonts/slick.svg" },
{ "bower_components/slick-carousel/slick/fonts/slick.ttf": "fonts/slick.ttf" },
{ "bower_components/slick-carousel/slick/fonts/slick.woff": "fonts/slick.woff" }
]
}
}
},
I've upgraded to new version of slick.js and now it's called slick-carousel in bower - just to explain difference in package name.
I am learning Meanjs. I need to add Fontawesome for my project. So I added an entry in bower.json as follows:
"dependencies": {
"bootstrap": "~3",
"angular": "~1.2",
"angular-resource": "~1.2",
"angular-mocks": "~1.2",
"angular-cookies": "~1.2",
"angular-animate": "~1.2",
"angular-touch": "~1.2",
"angular-sanitize": "~1.2",
"angular-bootstrap": "~0.11.0",
"angular-ui-utils": "~0.1.1",
"angular-ui-router": "~0.2.10",
"fontawesome": "~4.1.0"
}
and ran 'bower install'. Packages downloaded successfully, but fontawesome is not linked automatically in my page. Should I have to manually link those libs?
Please help.
The step you are missing is to add the entry in your config/env/*.js file(s). There is a library section where you will see other libraries. The config/env files are what determines the links that are added to the head tag.
I don't know of an automatic way to add these entries.
For:
"meanjs-version": "0.4.2"
Add the path to the library to:
/config/assets/*.js
Example:
/config/assets/default.js
module.exports = {
client: {
lib: {
css: [
'public/lib/bootstrap/dist/css/bootstrap.css',
'public/lib/bootstrap/dist/css/bootstrap-theme.css',
'public/lib/angular-typewrite/dist/angular-typewrite.css'
],
js: [
'public/lib/angular/angular.js',
'public/lib/angular-resource/angular-resource.js',
'public/lib/angular-typewrite/dist/angular-typewrite.js'
]
}
}
}
}
To auto update dependencies I've used wiredep in the past.
npm install --save-dev grunt-wiredep
In your Gruntfile.js you'll have a block that looks like this:
grunt.initConfig({
//bunch of tasks in here
clean: {...},
jshint:{...},
//add the following lines
wiredep: {
src: ['<%= yeoman.app %>/index.html', 'you can add', 'other search paths', 'here'],
block: /(([ \t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
replace: {
js: '{{filePath}}',
}
}
});
Once that's added as a task add the task to your task list
grunt.registerTask('testOrWhateverYoursIsCalled', [
//your other tasks here
'wiredep'
]);
Then in your .config file or wherever you have your big list of js files add this:
//bower:js
//this will get swapped out for your list of bower components
//endbower
The path might be weird, but I think you can use cwd to change the path. Not sure how do do that, just played with getting wiredep to replace things and it worked!!
Just answered my first question on stack, FINALLY!!!
Probably you should add
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
to your index.html
I've recently had to clone an project and rebuild bower packages. jQuery has updated I believe, and is now throwning an warning:
Warning:
Please go take a look in "app/bower_components/jquery"
for the file you need, then manually include it in your file.
I've done this. And everythign works properly. However, everytime I grunt serve the warning still gets thrown?
jquery was not injected in your file.
How do I remove this error? and will this error out a grunt build? I'm sure the warning is harmless but it's really upsetting to keep seeing it.
main .bower.json
{
"name": "jordan",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"angular-resource": "1.2.6",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6",
"angular-route": "1.2.6",
"jquery-ui": "~1.10.3"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
.bower.json for jquery
{
"name": "jquery",
"version": "2.1.0",
"ignore": [
"**/.*",
"build",
"speed",
"test",
"*.md",
"AUTHORS.txt",
"Gruntfile.js",
"package.json",
"bower.json"
],
"dependencies": {
"sizzle": "1.10.16"
},
"devDependencies": {
"requirejs": "~2.1.8",
"qunit": "~1.12.0",
"sinon": "~1.7.3"
},
"keywords": [
"jquery",
"javascript",
"library"
],
"homepage": "https://github.com/jquery/jquery",
"_release": "2.1.0",
"_resolution": {
"type": "version",
"tag": "2.1.0",
"commit": "cac43f3ef791b7e68c1917a734fb92e04450c111"
},
"_source": "git://github.com/jquery/jquery.git",
"_target": ">=1.6",
"_originalSource": "jquery"
}
You can workaround this problem changing the bower.json of your project and override some package with problem
"overrides": {
"jquery": {
"main": "./dist/jquery.js"
}
}
You can sse more about that in https://github.com/bower/bower/issues/585
But, looks like that current version of the JQuery is playing into the Bower rules.
As explained on the related Github issues available here:
https://github.com/stephenplusplus/grunt-bower-install/issues/55
This isn't an error with grunt-bower-install - this is, sadly, jQuery not playing by Bower's rules. It's not possible for this tool to work with a Bower package that doesn't specify main property. Like any other package that doesn't, the solution is to manually include the reference to the file inside of your HTML file, like the good ol' days
I'm sorry man, I had the same problem just now :(
In general, if you get this error it is because the author of whatever bower component you are using either hasn't included a bower.json file in the component or hasn't define a "main" property in the bower.json folder. If the component is being actively maintained, you should open a github issue asking for a proper bower.json file in the component. Here is an real world example...
https://github.com/CreateJS/SoundJS/issues/76