I'd like to setup tsconfig-paths for this project.
I'm not sure what I need to do after installing tsconfig-paths as a dev dependency.
Thoughts?
The plugin has to be registered dynamically via the command line for each script that is run. For example I have a data generate script in test/data/generate/index.ts. In order to run this script, which imports from #fs/utilities I need to do:
npx ts-node -r tsconfig-paths/register test/data/generate/index.ts
For my use cases this is enough as I have few scripts that need to be run dynamically inside the typescript project. For example for #fireflysemantics/validator everything exported is intended to be used by external dependencies, thus there are no cases where I need to run data generation scripts.
Related
For example, I created folder, opened it with VS Code. Opened a terminal, used the command npm install jquery, it creates a folder node_modules within my created folder. I then create an HTML file, put HTML template in and now I want to reference jQuery. I know how to reference the files syntactically and all that, I am just looking to understand best practices.
Do I just reference jQuery... JavaScript files within there? Or am I missing a step?
before starting on a new project you should use npm init. this will initialize the project and generate a package.json file. This package.json file is used for managing the project's dependencies(libraries), scripts, version etc.
And after this every time you install a library using npm it will get listed in this package.json file under dependencies section.
example after initializing the npm:
npm i jquery
and you can get it using
const jquery = require('jquery')
or
import jquery from 'jquery';
i.e; without using the relative path, example:
import jquery from '../../node_modules/jquery..'
It sounds like you are missing the build step.
When developing with npm, you usually use a toolchain with compilers, bundlers and minifiers, which read the libraries from the node_modules folder and put the resources in a build folder which actually gets deployed, and from where the js file will be loaded.
I have cloned the Angular2 quickstart repo and build a simple app. I want to publish it to the web now. It runs locally but it references files directly inside the node_modules directory.
Is there a standard build process I can run that will copy all needed files to the output directory? Or do I have to create this myself from scratch with a task runner or something?
This is my first time to answer a question so bear with me if I didnt do it correctly.
If "bundling all angular 2 ts/js and other dependencies (core.js, rxjs, zone.js) into one js and create a script tag on index.html to reference the bundled js" close to the standard build process you mentioned and you want, my answer is yes, you probably need to npm install some other tools to do it.
Since the angular 2 quickstart is using systemjs to do ES module loading, the tool you can use is called "systemjs builder" https://github.com/systemjs/builder which helps you to do bundling (based on systemjs.config.js) and yes, you can use a task tunner (grunt or gulp) with systemjs builder plugins (gulp-systemjs-builder or grunt-systemjs-builder) to create a task to "build".
You can use this https://github.com/AngularClass/angular2-webpack-starter
And using npm run build:dev or npm run build:prod
It will build a dist folder and that's all you need.
I'm trying to write an npm package that will add a specific npm script to whatever package.json on which it is depended. Nothing in the npm package.json / script docs is bringing me remotely close.
I'm basically trying to do this:
I install an npm package (call it 'cool-thing')
cool-thing, by installing, adds an npm script to my existent package.json
I can call cool-thing on the command line and it will perform whatever action is specified in the package.json
Anyone know how I could do this?
I am assuming you are working on a package cool-parent which depends on package cool-thing because you want to run the executable that cool-thing provides.
Normally, you would manually modify the cool-parent package.json to add a script:
"scripts": {
"cool-thing": "cool-thing"
}
Now for user convenience, you would like 1) to automate this modification. Not only that, you want to 2) make the modification automatically after the package is installed as a dependency.
There are some drawbacks to part 2, the developer of cool-parent
might not want to add a script,
might already have a script called cool-thing,
might not have a package.json,
...
I consider making modification outside of the package itself during install time to be an undesirable side effect.
If you still want to do it, you can using a postinstall script in cool-thing. You would need to figure out the location of the package.json of the parent if there is one through working directories and perhaps environment variables that npm provides.
I'm using FoundationPress theme for WordPress and installed it using Node.js. Now I want to install Perfect Scrollbar and I did so using npm install perfect-scrollbar but I don't know how to use it. I can now see it under node_modules. I don't know where to import the css and the js file.
I import .scss using the foundation.scss file. I'm adding the js by adding a .js file to js/custom and then running grunt build.
Do I also put it there or there's a nicer way to use the installed package? I've also run grunt build but didn't see the script running in my theme.
I'm using Git Bash command line to do all this. Not sure if that helps. I have only started using Node.js
I'm completely new to frontend web dev with a very basic question. Once I npm install something, how do I actually use it? For example, I just did npm install bootstrap, and I would now like to be able to use the CSS and Javascript that it downloaded. I'm sure I shouldn't have to dig through the directories to find some entry point... so how do I now use bootstrap in my webpage?
Most modules on NPM are used in Node.js, for the server (backend). Node.js has a built-in function require('your-module') to make use of the module. This function is not present on the frontend in the browser. However, there are tools like browserify or webpack and probably others to make the NPM modules and the require function work in the frontend.
If you're just starting out I suggest you take a look at Bower first. With Bower (installed with NPM though) you can pull in all your frontend libraries like jQuery, Bootstrap, etc. to your project folder and you can point your script tags in your HTML to the bower_components/ directory, e.g. <script src="/bower_components/jquery/jquery.min.js"></script>. You can save a list of all libraries used with a version number in a json file called bower.json in the root of your project folder.
Based on this file you can pull in or update all the libraries listed with the use of the command line.
As a really general rule, npm is used for assets your node app will use on the server, while bower (and others) are the equivalent for dependencies that you want to use on the client.
That said, the use is basically the same.
npm (and bower) install the files into your project directory in a standard location. All you really have to do is make sure that location is accessible via a web request (typically, node_modules is not; which is why bower came about), and then embed link and script tags as appropriate in your html:
<script src='/node_modules/bootstrap/js/bootstrap.min.js'></script>