I want to release a NPM package and I am currently looking for a solution to give users the option to use my rollup bundled ES5 code, or use the ES6 version.
I have a subfolder called lib where I have a index.js and another subfolder inside it called es6 which also has a index.js
In my package.json I have specified the main file as ./lib/index.js
How can I now make it possible to import the ES6 file by using import * as package from "package/es6" or is that not possible at all? If not, how would you import it?
Related
I am making a npm package which will have a node executable file.
My src folder include an index.js and other helper files in helper folder.
I want to use ES6+ syntax.
I want to import those helper files in index.js.
Build everything and create a single file which will be my executable.
I tried just Babel to build and transpile my code to ES5 but it wont work on imports.
Executable using Webpack + Babel resulted in errors.
Please point me to resource / help which will help me solve this problem
I am used to using NPM packages with Webpack, but I'm wondering how you're supposed to use NPM packages without Webpack.
I know how to install packages. I just don't know how to use them, since you can't just import modules in plain js.
Webpack compiles a bunch of javascript files and combines them into a single one for web distribution. NPM downloads javascript files through packages.
Here's some scenarios where you might use NPM without webpack
You are doing Node.js server-side javascript development. There's no webpack here
You are using a webpack alternative like rollup or browserify
You directly do anything else with the files npm downloads. Maybe you concatenate, throw them in a Makefile or maybe you expose node_modules directly to the world and reference their full paths directly.
Most of my web and server-side development is without webpack.
Why you can't import in plain js?
If you correctly define the package entry point like
"main": "dist/index.js",
"module": "dist/index.js",
Those files can be plain ES6 javascript with named exports or export default, and you can import them after intalling your package with regular import.
You don't need webpack nor babel to make an mpm module. Just put in any folder the files you want to distribute, specifying the main entry point and export elements on that file.
Now... in an angular or react application for example, they may install your component and will use babel and webpack to first transpile your component to ES5 with babel, and then bundle your code together with the rest of their app using webpack.
For front-end, not node.js but still NPM modules.
HTML can import directly ES6 modules but the file must be in .mjs format and provide export default, Module.exports in regular .js file wont't work. This is not a common thing and you'll run into problems if there are subdependencies that don't use ES6 modules. If you find a module that supports it. i.e. some-module
npm install some-module
And in the same directory next to node_modules create index.html pointing straight to the modular bundle
<h1>I'm HTML</h1>
<script type="module">
import SomeModule from './node_modules/some-module/bundle.mjs';
const mod = new SomeModule();
mod.doStuff();
</script>
Here's an article about this https://medium.com/passpill-project/files-with-mjs-extension-for-javascript-modules-ced195d7c84a
npm init
To create a package.json file
npm install --save <package>
To install a package and save it in the package.json file
I have a Node-Typescript project. That project has a dependency on another Typescript project. The dependency points directly to my Bitbucket repository. When I run "yarn install" the whole repository is cloned into my node_modules. That's perfect. In the root directory of my library-project is a index.ts file which contains the line "export * from './source'" to make it all available. I import and use some classes from the library in my code.
When I compile the project I get the exception: "Cannot find module './source'.". Furthermore it is not possible to automatically import the classes in Intellij.
What am I doing wrong?
Note:
I know, that the "right" way for libraries would be to generate JS and typing files and put the compiled source in to a private NPM repository. Since I am the only one that uses that library, I would like to have a simpler approach and just import the uncompiled Typescript into my project.
I've created a React project with create-react-app command, it uses webpack.
In order to use SASS I needed to eject with npm run eject command and to manually add SCSS loader inside loaders array, as explained here.
This is my first time with React and I'm using a per comonent style approach which consist in importing a .scss file per component.
I have a global variables file in ~/my-project-folder/src/assets/styles/_variables.scss and I want to import it from ~/my-project-folder/src/scenes/Auth/Login/styles/login.scss, of course I don't want to do something like #import '../../../assets/styles/_variables.scss'.
I've seen that I can refer to SASS files inside node_modules folder this way: #import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; so I'm wondering what is the way to refer to my project's root directory, i.e. ~/my-project-folder.
When you do this #import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; it will look for the bootstrap-sass in node_modules but when you want to import your global sass file in your other files then you have to give the relative path otherwise webpack will not able to resolve it for your. You can try to give public path in your webpack
Overview
I'm trying to install the bootstrap-wysiwyg package in my ES6 project using JSPM.
Usually you can just install a package using the command
jspm install npm:bootstrap-wysiwyg
And JSPM will take care of the config.js file and create the entry JS file in the jspm_packages folder.
My problem
For this particular package, it does create the config.js entry to the bootstrap-wysiwyg JS file in the root directory, but it does not create that JS file itself.
Files
Config.js
"bootstrap-wysiwyg": "npm:bootstrap-wysiwyg#1.0.4",
Import
import stuff from 'bootstrap-wysiwyg';
Error message
GET http://localhost:9000/jspm_packages/npm/bootstrap-wysiwyg#1.0.4.js 404 (Not Found)
Question
How can I make sure JSPM creates that file? I could make one myself, but then version control is obviously broken.
The module your are trying to import is missing "main" entry in its package.json: https://github.com/steveathon/bootstrap-wysiwyg/blob/master/package.json Therefore, JSPM cannot create the main import. You have to either import files directly from the module (i.e. import stuff from 'bootstrap-wysiwyg/js/smth') or create an override for this package which will define "main" for the package (https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#testing-configuration).