I'm a WebStorm noob - I want to know how to add and refer to an external js library - best practice
I just started learning WebStorm and JS. What I'm looking for is a way to use a library with my project. As I don't want WebStorm to analyze the library I want to make it external rather than add it to the src folder. (I've tried adding a file to the project and it keeps throwing up errors that I believe are irrelevant). Even after reading WebStorm's documentation, I'm really struggling to understand the correct way to use an External Library with WebStorm. So far, as a test, I've added a little test library to the External Library and I've used the "Use Javascript Library" to refer the library to the App.js file. Here's the code I've written. What I'm trying to do is understand this fully rather than just hack things together :) Any help would be appreciated.
HTML file (not sure how to create the proper link to the jsdate.js file)
```
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="jsdate.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
```
Index.js file
```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
```
App.js file
```
import './App.css';
import React from 'react';
function App() {
return (
<div>
<p><b>React with external js library</b></p>
</div>
)
}
export default App;
```
jsdate.js file (external library)
```
export function Todaydate(){
var today_date= new Date()
var myyear=today_date.getYear()
var mymonth=today_date.getMonth()+1
var mytoday=today_date.getDate()
return ("Date: "+myyear+"/"+mymonth+"/"+mytoday)
}
```
Please sign in to leave a comment.
Not sure what this has to do with Webstorm libraries - those are only used for code completion/error highlighting and aren't available to the application in runtime. Please see https://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/ for more info
As far as I can see, you are using ES6 modules in your code. Where do you have your libraries installed? Using ES6 modules in browser requires using special syntax (you can only use
importandexportstatements inside modules, not regular scripts, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html) and native support for modules in browsers is actually quite week/limitedI'd suggest trying some basic tutorial for getting started with React and other stuff