I am working on converting a large application from JavaScript (Backbone and Angular 1) to TypeScript. When we convert a file that is used by other files we understand that we have to update the import statements in those other JavaScript files so that it imports the new TypeScript file correctly. Our syntax update in fake-file.js is as follows.
Before:
import OurService from 'our.service';
After:
import { OurService } from 'our.service';
I understand that this is an easy change but TypeScript is new to many developers and there have been problems with people missing some of these import statements or forgetting to change them all together resulting in some issues during runtime. I have looked into compiler options but I do not see any that would fix this issue but I could be misinterpreting them.
Question: Is there a way to configure the compiler (or a Visual Studio Code plugin) to throw a warning or an error to prevent this from happening?
I assume that I understood your requirement and possibly you need to adapt a linting process and consequently I would suggest the following tools (which I also use in my project):
Airbnb Javascript style guide (your import statement concern-https://github.com/airbnb/javascript#modules). These are a well-defined set of standards defined for any JS application (including ES).
ESLint. You can run ESLint from the terminal and configure it for your project that highlights warning/errors in your code. If this looks complicated, you can generate the tslint document for your entire project in the website itself. Click on rules configuration and configure the ES rules for your project. There are some import related rules too.
PS: Feel free to add your comments.
I am trying to create a webpage using a HTML theme on Reactjs. I have studied and found there are 4 ways to import CSS at this link. All these ways outputs the same way i.e <style>MY_CSS</style> just before closing HEAD tag.
This is OK for single CSS but when we are using multiple CSS it may conflict with other one.
So my question is can we import CSS so that it will show in not as <style></style>. As <style> tags works as inline CSS and I don't want to use it inline.
2nd question: How can I import Js?
As I am using requirejs to load multiple js, for this I am trying to import require.config.js where my other js are called.
Please have a look what I am getting
Need to have like this below
Please help, thanks in advance!
This is just done via ordinary ES. For example:
import React, { Component } from 'react'
import './SomeFileWithStyle.css'
The second line imports a CSS file containing, well, CSS code. You are now able to use the classes specified in there. Follow this guide if you need further help: Styling and CSS - React.
Read more about the ES import statement here: import - JavaScript | MDN
The easiest way to learn React and the way you should structure a React project ( this includes everything, from css, to multiple js files, etc ) is to use create-react-app
Let me try to elaborate a bit.
React is a javascript library. You could, for example, get the library from a cdn and include it in your index.html file much in the same way you would get jquery for example. And, with the library included, you could do things like this:
const element = React.createElement(
'h1',
null,
'Hello, world!'
);
const container = document.getElementById('root');
ReactDOM.render(element, container);
Since you have the library from a cdn, you have access to it's methods, for example createElement and the library will look for a node in the dom with id called root and insert there a h1 node containing Hello, world!. You could then apply to the newly created node a style of your choice.
This example was taken from here
While it is certainly possible to use React this way, you shouldn't, in my opinion.
What you should do is follow the steps outlined in the create-react-app link and bootstrap a project using create-react-app. This will give you a pre configured project, that will allow you to use the library in a modern way.
The project that create-react-app offers you is set up to use a tool called webpack and a tool called babel. Webpack is a module bundler. Using a set of rules, it will take several files and bundle them together. How and why it works is beyond the scope of this question. Babel is a javascript compiler or syntax transformer. Also using a set of rules, it turns ES6 into regular javascript. Again, the how and the way are out of scope. What you should know is, because of webpack and babel, you will be able to write code like this.
import styles from 'style.module.css'
This is done with no effort on your part, because everything is already configured by create-react-app.
This is why I recommend you start with this. Just install it, bootstrap a project and take a quick look at how App.js is set up. You will see there css imports, component imports and will give you a good if shallow overview of how a modern React project works.
Import your .css file from the correct path. I struggled with using <link rel="stylesheet" href="css/style.css">
in index.html without any luck.
But instead:
index.html:
<link rel="stylesheet" href="/src/css/style.css"/>
style.css:
div.custom-div {
background-color: red;
}
Now, you can use
<div className="custom-div">
You need to use css-loader when creating bundle with wepback.
Install it:
npm install css-loader --save-dev
Read more here
I'm experimenting with using web components for a project — essentially custom elements powered by attributes, ideally imported by <link rel="import">.
Here's the problem: I can't find conclusive guidance on where to stick any external libraries my component relies on, such as moment.js or even jQuery.
Most component examples I've seen strictly use vanilla JS. When they do use an external library, they often seem to drop them in using Bower or npm and and refer to them explicitly within the component's HTML:
<script type="text/javascript"
src="/bower_components/jquery/dist/jquery.min.js></script>
These days I'm more accustomed to using webpack to bundle dependencies, so this seems a bit odd.
My question: is it considered better form to include each component's library dependencies within the component directory, or have a central node_modules folder at the project level? How does webpack fit into this?
It's better to have a central node_modules folder at the project level. Most people use Webpack to bundle their code with their dependencies. They use require or import their modules for each component.
a.component.js
import React from 'react'
import $ from 'jquery'
b.component.js
import React from 'react'
app.js
import A from 'a.component.js'
import B from 'b.component.js'
Webpack will have one "entry": app.js and compile it output: app.min.js
why?
It's easier to manage (update, delete, add) dependencies with npm.
The browser will load one file instead of multiple external files.
External info:
https://webpack.js.org/concepts/
https://www.quora.com/Why-use-Bower-when-there-is-npm
I want to use es6's import, require and export in my web app using codeigniter.
i found babel-standalone but it's not working.screenshot of embed js files
With the added detail that
import, require and export is undefined
Here's the problem: that's not what Babel does. Babel transpiles code: it turns one file of ES6 code into a file that contains ES5 code that does the same thing. It does not combine source code files that use require or import into bundles.
You're looking for browserify or Webpack to do that - they are bundlers, tools that let you use require, import, and export to organize code. You'll need to use one of them to accomplish your goal - Babel alone will not do what you're trying to do.
Should be quite a common question for a webpack newbie but unfortunately couldn't find a solution -
My project uses webpack. I need to use a library but it needs to be used as the old way of adding script tag like
<script src="//messaging-public.realtime.co/js/2.1.0/ortc.js"></script>
However I am looking for some way through webpack (a loader or in some other way) such that I can use it like
import ortc from "realtime-framework"
or
import * as ortc from "realtime-framework"
You will need to either:
Install it from a package manager like npm;
Download the file locally and import it;
Or include it the normal way with a script tag, making sure it is included before your script.