I am trying to compile a very simple typescript code with esbuild.
However esbuild is compiling only the entry file.
This is my setup:
//index.ts
import * as mod1 from './mod1';
mod1.my_method();
//mod1.ts
export function my_method(){
console.log('debug');
}
I run:
esbuild index.ts --outdir=./dist --platform=node
the compilation is done with no error and if I now check the dist I get only
dist
- index.js
// dist/indes.js
import * as mod1 from './mod1';
mod1.my_method();
but there is no trace of dist/mod1.js. So of course the code cannot run and give an error.
Why esbuild is not compiling all the other files like mod1.ts?
I can't use --bundle in my project.
esbuild index.ts --outdir=./dist --platform=node
^^^
you only specify the index.ts file in the commandline
i never actually worked with esbuild, but there is probably a function for folders, like esbuild . --outdir=./dist --platform=node
Related
When i do npm install react-slick, i get the following in my node_modules folder:
Now in my react application in a src/index.js file, when i do the following:
import Slider from "react-slick";
How does webpack know where to pick slider from ? will it at all look for some clue or definition inside node_modules/react-slick/package.json at all ?
Edit :- so here is the package.json file for webpack, when i import Slider from 'react-slick' , does it resolve to dist or lib ? and which file does it pick then and why ?
Well, the simple walkthrough of it will be as below:
Simple Walkthrough
If you carefully look at the node_modules/react-slick/package.json there is a property named main. Something like this:
{
"name": "react-slick",
"main": "index.js"
}
It will tell the Webpack which file is the entry file of the whole package (It's usually referred to index.js). All the necessary exports for the package lies in this file, so Webpack will only look for those exports and will import what you looking for. In this particular case, there should be a default export for the Slider that you using right now. So the index.js is probably something like this:
// index.js
var slider = require('./lib/slider'); // Usually all the main modules are lies under lib folder.
// other imports ...
module.exports = slider;
Difference between lib and dist
Usually, the dist folder is for shipping a UMD that a user can use if they aren't using package management. The lib folder is what package.json, main property points to, and users that install your package using npm will consume that directly. The only use of the lib as opposed to src is to transform your source using babel and Webpack to be more generally compatible since most build processes don't run babel transforms on packages in node_modules.
Webpack uses aliases to target node_modules using a shorthand.
Example #1:
import 'xyz'
/abc/node_modules/xyz/index.js
Example #2:
import 'xyz/file.js'
/abc/node_modules/xyz/file.js
Once it targets the correct folder in node_modules, it follows the rules written in the package itself (manifest, package.json)
You can also define your own aliases as such:
webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
xyz$: path.resolve(__dirname, 'path/to/file.js')
}
}
};
And then can be used as import xyz from $xyz
I am trying to publish a package on npm. I'm not sure how to phrase what I am trying to do..maybe packaging "sub modules"?
The abbreviated directory structure is:
- package.json
- src/
- a.js
- b.js
- dist/
- a.js
- b.js
My build script uses Babel to transpile to the dist directory with the same modules as in src/. I would like
consumers to import functions from the a.js module like so:
import {foo} from "mypackage/a";
not
import {foo} from "mypackage/dist/a";
If I add an index.js to mypackage/ and export a I can do
import {a} from "mypackage"
but that's not what I want...
What is the standard way to publish packages so "sub modules" can be imported like this or can someone point me to a repo that does this kind of thing?
If I understand, there should be two options that you can choose.
First, let me try to explain how Node sub-modules with a slash are handled by Node.
When you import the module with a slash, Node will try to look in the root folder for a file with the name that is specified after the slash. In your case, it will be a.js. In case nothing is found, Node will try to look for the directory named a containing the file index.js. If no file is found, nothing is imported.
So back to your problem, you can either create file a.js in your root folder containing the following export:
export * from './dist/a';
// The traditional export should look like this, in case I have wrong ES6 export
module.exports = require('./dist/a')
or change the structure of your project a bit, so files a and b are located in their specific directories.
For example:
- package.json
- src/
- a.js
- b.js
- a/
- index.js
- b/
- index.js
I have a monorepo with lerna, yarn workspaces, and the following structure:
- packages
- a_webpack
- src
- index.ts
- dist
- main.js
- main.css
- b_tsc
- src
- indes.ts
- dist
- index.js
both packages a_webpack and b_tsc are to be consumed by another package c.
on b_tsc i run tsc to compile into its dist folder.
on a_webpack i run webpack to do the same
I mainly use webpack, because I can get a separate .css file in the dist that can be imported
When I import b_tsc in package c like:
import { something } from 'b_tsc'
everything works as expected.
Also when I do:
import 'b_tsc/dist/main.css'
that is working.
However when i try:
import { something } from 'a_webpack'
I'm getting:
Module not found: Can't resolve 'a_webpack'
Question
Even if I change the output of webpack to generate dist/index.js, it doesn't work. What am I doing wrong here?
General Question
When importing like seen above, how does the compiler know it needs to look inside dist/main.js or any other entry point within that package?
Figured it out:
The entrypoint is specified in the package.jsons main property.
That solved the import issue for me.
Works if run from file root folder but on the subfolder, I get a syntax error.
The error is regarding import syntax, failing at first import which is gulp.
If I change to require it works but I need the setup in ES6.
I need to mention again, it works fine if I run the command from a terminal from the folder where gulfile is.
PS: I've updated some babel to 7 - I did not have this problem with babel 6.
Looks like if failing to use .babelrc from the outside root folder.
Everything I could find online.
'use strict';
/**
* Note: I updated most of the theme npm deps including gulp#4
*/
import gulp from 'gulp';
import babel from 'gulp-babel';
import uglify from 'gulp-uglify';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'gulp-autoprefixer';
import revAll from 'gulp-rev-all';
import cleanCSS from 'gulp-clean-css';
import svgSprite from 'gulp-svg-sprite';
import del from 'del';
import merge from 'merge-stream';
import browserify from 'browserify';
import browserSync from 'browser-sync';
import source from 'vinyl-source-stream';
import buffer from "vinyl-buffer";
import babelify from 'babelify';
It should work the same as the task is run from root directory even if is run from the subfolder.
I believe you should update the main parameter of your package.json file.
Please refer to Node.js package.json main parameter for further info.
Hope it helps.
I have two javascript projects in separate directories within a parent directory and I want both of them to be able to import files from a common directory. The structure looks a bit like this:
- parentDir
- project1
- package.json
- webpack.config.js
- src
- index.js
- project2
- package.json
- webpack.config.js
- src
- index.js
- common
- components
- CommonComponent.vue
- application
- app.js
I'd like both project1's index.js and project2's index.js to be able to import CommonComponent.vue and app.js.
Currently this works if I do:
import CommonComponent from ../../common/components/CommonComponent.vue
However those import paths starts to get very messy and hard to maintain the deeper into each tree we go, with huge numbers of ../s, so I'm trying to find a way of making the imports neater and easier to manage and I came across resolve options in webpack. So I've tried adding this to my webpack.config.js:
resolve: {
modules: [
path.resolve("../common/"),
path.resolve("./node_modules")
]
},
so then the import would look like:
import CommonComponent from "components/CommonComponent.vue"
import app from "application/app"
Importing the plain js file works, but when trying to import the .vue file, webpack throws an error:
ERROR in C:/parentDir/common/components/CommonComponent.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:/parentDir/common/components'
So how can I apply webpack loaders to files imported via resolve.modules?
Note: importing .vue files from within a single project works fine, so my module.rules config is correct.
It turns out the common package needed its own node_modules. That doesn't seem to be the case when importing a file from there directly via its path, but it is when using either resolve.modules or resolve.alias in webpack.
So the answer was to npm init in common and then to npm install all the dependencies and devDependencies needed there. e.g (of course these will depend on the project):
npm install --save vue
npm install --save-dev babel-core babel-loader css-loader less-loader vue-loader vue-template-compiler webpack
Once that's done, both of these webpack configs seem to have the same result as far as I can tell:
resolve: {
modules: [
path.resolve("../../common"),
path.resolve("./node_modules")
]
},
and
resolve: {
alias: {
components: path.resolve("../../common/components")
}
}
Both allow a file in project1 or project2 to do an import like:
import CommonComponent from "components/CommonComponent.vue"