I've been using vue-cli since some time now, and still have not fully understood how file loading is done. I've read documentation and some blogs and helped me to deal with it since now.
I'd like to import static .js files with some constants in a component. I don't want them to be bundled at deployment, so they can be found and changed easily, directly in the server if needed without having to rebuild the whole project.
I tried to place them in /public/constants/foo.js directory and point to them using absolute paths in different ways
import FOO from '/constants/foo.js'; // Not working
const FOO = require('/constants/foo.js'); // Not working
How can I achieve this?
If I understand well your project arch is like
/root
|__/public
| |__/img
| |__/css
| |__/constants
| |__/foo.js
| |__/bar.js
|__/webpack.config.js
In your webpack.config.js create a new entry like
module.exports = {
entry: './public/index.js'
};
Then create a index.js file inside your public directory and import your foo.js
import foo from './constants/foo';
Of course your foo.js should export something like
export default function foo() {
//
}
Hoping that will help you.
Related
I have two files, one is my main js file called app.js and I have a file where I store all my js functions, called functions.js. As you can see on the image below.
But I want to include the functions.js file into the app.js file. So I googled on how to do it and this is what people said:
But my npm run dev says the file doesn't exist. But the path is correct. What am I doing wrong here, is there a other way to do it?
You can simply just create the file wherever you want to create it, and then export some properties or methods, and then import them in your app.js file, or in whatever file you need. Something like this :
//new_file.js
export const jokes = function() {
return ['funny', 'not really funny', 'boring']
}
export const heading = 'some global heading to be reused.'
And in your app.js file :
import { jokes, heading } from 'new_file.js'//specify actual path here .
console.log(jokes) // ['funny', 'not really funny', 'boring']
console.log(heading)//some global heading to be reused.
This tutorial might be helpful too .
http://www.2ality.com/2014/09/es6-modules-final.html
The code environment is browser. bundle tool is webpack. I have a router.js file like:
import foo from './views/foo.vue'
import bar from './views/bar.vue'
import zoo from './views/zoo.vue'
//use foo, bar, zoo variables
I've many '.vue' files to import like this under views folder. Is there a programmatical way to auto import all [name].vue as local variable [name]? So when I add or remove a vue file in views, I don't need to manually edit router.js file. this one seems a little dirty.
for (let name of ['foo', 'bar', 'zoo']) {
global[name] = require(`./views/${name}.vue`)
}
Nope, that's it. You have a choice between dynamic import and automation, or explicit coding and type-checking / linting.
Unfortunately, it's one or the other. The only other way to do it is meta-programming, where you write code to write your code.
So you generate the import statements in a loop like that, and write the string into the source file, and use delimiting comment blocks in the source file to identify and update it.
The following works for me with webpack and vue.
I actually use it for vuex and namespaces. Hope it helps you as well.
// imports all .vue files from the views folder (first parameter is the path to your views)
const requireModule = require.context('./views', false, /\.vue$/);
// create empty modules object
const modules = {};
// travers through your imports
requireModule.keys().forEach(item => {
// replace extension with nothing
const moduleName = item.replace(/(\.\/|\.vue)/g, '');
// add item to modules object
modules[moduleName] = requireModule(item).default;
});
//export modules object
export default modules;
We're using a folder structure like this
components
| Button.js
| Nav.js
| ...etc
| index.js
somefolder
|somefile.js
in the inderx file we're importing every component and reexporting it like this
// index.js
import Button from './Button'
import Nav from './Nav'
export {Button, Nav}
this way we can import many components into a file like this
// somefile.js
import {Button, Nav} from '../components'
Maintaining that index file is a bit of a pain though and discourages flexible use of components. I know that Webpack can import many files with a syntax like this
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./components/', true, /\.js$/));
however, I didn't yet find a way to reexport all of these components to use them like above.
The desired outcome is to replace the index.js file with something that automates the process of bundling all the files from a folder without having to add every file manually.
I think getting rid of the file index will not be the best solution and may cause questions from other developers. But I can offer a slightly more simplified way:
index.js:
export * from './some-component1.js';
export * from './some-component2.js';
some-component1.js:
export {SomeComponent1};
some-component2.js:
export {SomeComponent2};
I'm trying to use wasm-clingo in my TypeScript React project. I tried to write my own d.ts file for the project:
// wasm-clingo.d.ts
declare module 'wasm-clingo' {
export const Module: any;
}
and import like this:
import { Module } from 'wasm-clingo';
but when I console.log(Module) it says undefined. What did I do wrong?
Notes:
clingo.js is the main js file.
index.html and index_amd.html are two example pages
Solution:
I solved the problem like this:
// wasm-clingo.d.ts
declare module 'wasm-clingo' {
const Clingo: (Module: any) => Promise<any>;
namespace Clingo {}
export = Clingo;
}
and
import * as Clingo from 'wasm-clingo';
Here's the source for this solution
I know you found a solution acceptable to you; however, you don't really have any types here, you just have Module declared as any, which gives you no typescript benefits at all. In a similar situation I used #types/emscripten, which provides full type definitions for web assembly modules compiled using emscripten. You simply need to do:
npm install --save-dev #types/emscripten
then change your tsconfig.json types array to add an entry for emscripten.
After that you can just write Module.ccall(...) etc. If you like you could of course write const Clingo = Module and then make calls against that if you want a more descriptive name than Module (which is a terrible name!).
You're welcome ;)
I think the issue is that wasm-clingo exports the module itself but import { Module } from 'wasm-clingo' expects a property.
Try
import Clingo_ from 'wasm-clingo';
const Clingo: typeof Clingo_ = (Clingo_ as any).default || Clingo_;
In my Angular 2 app, I have a settings.js file with various exports that I want to use throughout the application:
exports.httpPort = 9000;
exports.httpsPort = 1435;
exports.segmentID = 1;
I want to export some of these into my ts component file query.component.ts, but I'm at a loss on what the correct syntax to do so is.
I see that many .js files have something along the lines of
var settings = require('../../settings');
which grabs the settings file and then
settings.dbConfig
Which calls the export, but it doesn't work on my component file.
This is my project file structure:
component.ts
- project/web/src/app/component.ts
-Place where I want to import an export from settings.js.
settings.js - project/server/settings.js
-File where I want to make the export.
In the component class you can do:
...
import {httpPort} from "../../../server/settings.js"
...