In my tsconfig.json file, I have:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": false,
"baseUrl": "./node_modules/"
},
"exclude": [
"node_modules",
"typings"
]
}
Transpiling to JavaScript works fine, but throws an error in the browser. (exports is not defined). If I remove commonJS as noted in this answer, then it can no longer resolve the import statment:
import { angular } from "angular";
...and it won't transpile. What am I missing here?
Updated:
As requested in the comments, a file tree for project structure. The tree actually has 250+ directories and several thousand files, it has been abbreviated to only show the relevant bits:
.
├── bugzy-work-timer
│ ├── app.php
│ ├── css
│ │ └── 01-timer.css
│ ├── js
│ │ └── footer
│ │ ├── timer.js
│ │ └── timer.ts
│ ├── manifest.sig
│ ├── manifest.xml
│ └── tests
├── move-unused-apps.sh
├── node_modules
│ └── angular
│ ├── angular-csp.css
│ ├── angular.js
│ ├── angular.min.js
│ ├── angular.min.js.gzip
│ ├── angular.min.js.map
│ ├── bower.json
│ ├── index.js
│ ├── LICENSE.md
│ ├── package.json
│ └── README.md
├── package-lock.json
├── phpunit.xml
├── tsconfig.json
├── tsd.json
├── tslint.json
├── typings
│ ├── index.d.ts
│ ├── modules
│ │ └── angular
│ │ ├── index.d.ts
│ │ └── typings.json
│ └── tsd.d.ts
└── update-all.sh
Related
I try to document my "large" node.js backend, which has the following file/folder structure:
backend
├── components
│ ├── devices
│ ├── endpoints
│ ├── plugins
│ ├── rooms
│ └── vault
├── helper
│ ├── debounce.js
│ ├── expose.js
│ ├── extend.js
│ ├── infinity.js
│ ├── iterate.js
│ ├── mixins.js
│ ├── observe.js
│ ├── promisify.js
│ ├── propertys.js
│ ├── queue.js
│ ├── request.js
│ ├── sanitize.js
│ └── timeout.js
├── index.js
└── system
├── component
├── hooks.js
└── middleware.js
Basically i want to create tree groups: system, helper & components, where i can add.
Is there a way to add custom categorys/groups in the jsdoc with the above headlines? E.g. (Generated jsdoc output edited to illustrate goal):
Is there a built in way with a combination of built in stuff?
(Im pretty new when it comes to work with jsdoc)
I am using bootstrap carousel to make a website for a school project.
I want the search input box to highlight all text on the page its on so I Googled and found mark.js : https://markjs.io/
And I looked at the Search bar with jump to matches example which leads me here: https://jsfiddle.net/bap5uf8e/
So I copied and pasted the html into index.html added all the basic elements like !DOCTYPE html, head and body, copied the css into a test.css and referenced to it in the <head></head> of index.html. For the JS, I cloned the repo for mark.js and put it in my project folder so the tree looks like this:
├── index.html
├── mark.js [9 entries exceeds filelimit, not opening dir]
├── markTest.js
├── package-lock.json
└── test.css
markTest.js is the JS code copied from the above example (link again: https://jsfiddle.net/bap5uf8e/)
Then I reference both mark.min.js and markTest.js right below the opening <body> tag:
<body>
<script src="mark.js/dist/mark.min.js"></script>
<script src="markTest.js"></script>
Next I use browser-sync (https://www.browsersync.io/) to see if the highlight functionality works but it does not. I copied package-lock.json from my home folder to this one because it had something about mark.js in it and in Python which I am fairly comfortable with, I would put the requirements.txt or yaml file in the project folder. It looks like this:
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"jquery": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
},
"mark.js": {
"version": "8.11.1",
"resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
"integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U=",
"dev": true
}
}
}
I have npm install'ed jquery, mark.js as the above seems to indicate. Can someone point out to me what I am missing to get this example to work locally?
This worked:
├── assets
│ ├── brand
│ └── dist
├── biosphere.html
├── clipboard.html
├── comp2680Presentation.odp
├── css
│ ├── biosphere.css
│ ├── bootstrap.css
│ ├── carousel.css
│ ├── dashboard.css
│ ├── famousVegans.css
│ ├── food.css
│ ├── grid.css
│ ├── mental.css
│ ├── parallax.css
│ ├── physicalHealth.css
│ ├── signin.css
│ ├── spiritual.css
│ └── starter-template.css
├── dashboard.html
├── famousVegans.html
├── food.html
├── grid.html
├── index.html
├── js
│ ├── clearButton.js
│ ├── dashboard.js
│ ├── main.js
│ ├── mark.min.js
│ ├── nameValidator.js
│ └── navbarSearch.js
├── js_test
│ ├── basicMarkJS.css
│ ├── index2.html
│ ├── index.html
│ ├── mark.js
│ ├── markTest.js
│ ├── package-lock.json
│ └── test.css
├── markJsTest
│ └── index.html
├── mental.html
├── navbarSearchDemo.png
├── parallax.html
├── physicalHealth.html
├── public
│ ├── fonts
│ └── imgs
├── README.md
├── signIn.html
├── spiritual.html
└── starter.html
You can see my site here: https://nyck33.github.io/ecoWarriors/
The mark.js highlighting works.
I've tried to set up a grunt csscomb task, but I'm not sure if I'm getting the globbing pattern right:
csscomb: {
dynamic_mappings: {
expand: true,
cwd: 'app/',
src: '**/*.scss',
dest: 'app/assets/tempcomb'
},
options: {
config: 'csscomb.json'
}
},
Here is my folder architecture:
app
├── assets
│ ├── css
│ │ ├── imports
│ │ │ ├── helpers
│ │ │ │ └── _helpers.scss
│ │ │ ├── layout
│ │ │ │ ├── _fonts.scss
│ │ │ │ ├── _grid.scss
│ │ │ │ └── _reset.scss
│ │ │ └── modules
│ │ │ ├── _dev.scss
│ │ │ ├── _indicators.scss
│ │ │ ├── _modal.scss
│ │ │ ├── _nav.scss
│ │ │ └── _ref.scss
│ │ ├── main.scss
│ │ └── pages
│ │ ├── bibliography.scss
│ │ ├── cover.scss
│ │ ├── example.scss
│ │ ├── examples
│ │ │ ├── _bar-graph.scss
│ │ │ ├── _modal-transitions.scss
│ │ │ ├── _modals.scss
│ │ │ ├── _scroll-end-animation.scss
│ │ │ ├── _scrollable.scss
│ │ │ └── _tabs.scss
│ │ ├── index.scss
│ │ └── prescribing-information.scss
│ ├── fonts
│ ├── img
│ ├── js
│ ├── tempcomb
What I want it to do is look at all the directories under app, take all the scss files and write them to tempcomb while also maintaining the folder structure.
Currently it replicates the folder structure fine, but it only outputs the scss files that are in the layout folder.
If anyone could explain to me why this is happening it would be much appreciated!
P.s. before the task runs, the tempcomb folder doesn't exist. I've just added it to the architecture diagram to show where it ends up.
When I use bower install to install the dependencies, they will be downloaded into bower_components, like:
├── jquery
│ ├── AUTHORS.txt
│ ├── CONTRIBUTING.md
│ ├── MIT-LICENSE.txt
│ ├── README.md
│ ├── build
│ │ ├── release-notes.js
│ │ ├── release-notes.txt
│ │ └── release.js
│ ├── component.json
│ ├── composer.json
│ ├── grunt.js
│ ├── jquery.js
│ ├── jquery.min.js
│ ├── package.json
You can see there is no version in the file names.
Is there any way to make bower add the versions to the file name or path automatically, so that I don't need to worry about the browser-cache if I include them directly in the web server?
I want it like this:
├── jquery-1.9.1
│ ├── AUTHORS.txt
│ ├── CONTRIBUTING.md
│ ├── MIT-LICENSE.txt
│ ├── README.md
│ ├── build
You can do like this :
bower install jquery-1.9.1=jquery#1.9.1
I am at the point where I have to add Express 4 to my modularized AngularJS ui-router app. Previously I used this tutorial to modularize my Angular app. I currently have all the modules for my AngularJS app in the src/app/ directory like so:
$ tree -I 'node_modules|bower_components|assets|scss|test' -L 4
.
├── awsS3.js
├── bower.json
├── Gruntfile.js
├── karma.conf.js
├── karma-e2e.conf.js
├── package.json
├── README.md
├── server.js
└── src
├── app
│ ├── app.module.js
│ ├── auth
│ │ ├── auth.ctrl.js
│ │ ├── auth.module.js
│ │ └── auth.serv.js
│ ├── image
│ │ ├── image.module.js
│ │ ├── images.ctrl.js
│ │ ├── image.serv.js
│ │ ├── images.tpl.html
│ │ ├── imageview.ctrl.js
│ │ └── imageview.tpl.html
│ ├── nav
│ │ ├── login.tpl.html
│ │ ├── nav.ctrl.js
│ │ ├── nav.module.js
│ │ ├── post-register.tpl.html
│ │ ├── register.tpl.html
│ │ └── url.fltr.js
│ └── security.json
├── index.html
└── robots.txt
Now I am wondering how I should break up the Express 4 code to fit in with my Angular modules. I really can't find any tutorials that focus on this. Any ideas?
When i develop client-server applications I tend to keep the server and client completely separate from each other. So I would suggest that you create a "server" folder and in there your layout could look something like this:
server
--app.js
--server.js
--config.js
--controllers
----firstController.js
--routes
----firstRoute.js
--models
----firstModel.js
I would recommend this website: https://scotch.io