Exporting a module built by webpack - javascript

I am writing 3 modules to be published as npm modules
Admin (has core has a dependency)
Member (has core has a dependency)
Core
package.json in Core:
{
...
"main":"dist/bundle.js"
}
usage of core in Admin:
import core from "core"
All modules are built by webpack.
The problem is that if I use webpack to build Core, generating bundle.js, and have Admin to import bundle.js lots of libraries will be duplicated.
E.g. Angular, bootstrap etc..
What I am doing now is to import the entry file src/index.js in admin
package.json in Core:
{
...
"main":"src/index.js"
}
usage of core in Admin:
import core from "core"
but webpack cannot resolve some dependencies in core correctly, for example, I have set up more than one root in webpack.config.js in core module, so that some short hand import is possible.
root: [
path.resolve(__dirname, './src/'),
path.resolve(__dirname, './src/directives')
]
// instead of relative path
import "../../myDirective.js"
// I can use
import "myDirective.js"; // where myDirective.js is under "src/directives/myDirective.js", but this fails when I try to build `admin` module.
Is there a simpler way for webpack to build npm-modules so that it is easy to import?
Core: depends on angular, bootstrap, core.js
Admin: depends on angular, bootstrap, admin.js, includes core as a module

It's interesting to me too. I suggest it can be done by setting webpack's library options.

Related

Using NPM packages client-side with nuxt

I'm very new to nuxt and javascript and I'm trying to figure out how to use my app's dependencies client-side. I have them listed in my nuxt.config.js and installed with npm. I also have a file in the /plugins directory that imports them (not sure if this is good or not). Here is where I run into trouble: I have two scripts located in my /static directory that need to take advantage of my npm packages. Putting an import statement in those scripts causes an error. Importing the packages in the script section of the page vue file also doesn't work. How can I use npm packages in scripts that are included in pages client-side?
Can you provide a more information, about which kind of error is happening and which kind of packages did you try to install?
In this example I am going to show you how I included in my nuxt project npm package vuelidate
after installing vuelidate:
add to nuxt.config.js
plugins: [
{ src: "~/plugins/vuelidate", mode: "client" },
],
create vuelidate.js file in my plugin folder (plugin/vuelidate.js)
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate);
after that I can use vuelidate in my .vue components (no always necessary to import something because in our 2 stage Vue.use(Vuelidate) we already installed vuelidate globally)
<script>
import { required, minLength } from "vuelidate/lib/validators";
export default {
name: "OrderByLinkForm",
components: {},
...
};
</script>

How can I add the commonjs module to a Nuxt project?

I'm new to javascript and I am following a Nuxt tutorial where I created the app skeleton with npx create-nuxt-app. The tutorial got me up and running with a basic frontend. Now I need to add the module commonjs to my project (to resolve Error: exports is read-only when I try to require modules from a nodejs backend).
I was told I could add commonjs to babel.config.js as shown below. However, my Nuxt project does not have babel.config.js.
module.exports = {
presets: [
['#vue/app', {"modules": "commonjs"}]
]
}
I tried adding commonjs to the modules array in nuxt.config.js and that results in new errors, so I removed it. (After reading the Nuxt docs, I see that the modules section is for Nuxt.js modules.)
How can I add the commonjs module to a Nuxt project created with npx create-nuxt-app?

Importing just DefaultUrlSerializer class into an Angular project without entire router module

Following import statement pulls entire router module into the final webpack bundle.
import { DefaultUrlSerializer } from '#angular/router';
Is there a way to just import the DefaultUrlSerializer without other irrelevant module ?
I'm using Webpack module builder and Angular Cli for AOT/production builds.
No, you cannot do that unless you build the Angular yourself. The npm package doesn't ship modules separately, but as a one bundle in the UMD format:
node_modules
#angular
router
bundles
router.umd.js
No matter how you import DefaultUrlSerializer, webpack will include the contents of the entire router.umd.js in the final build as it can't extract code from a file.

Import angularjs minified version

I'm using webpack, angular 1.x and have the following code
import angular from 'angular';
which works good, but the problem is that included file is too big (angularjs - 1.15mb). It will be better of course to use minified version of angularjs, but when I change code to
import angular from 'angular/angular.min.js';
it doesn't work properly, I mean it seems like angular.min.js doesn't export appropriate angular object.
What's the right way to use minified version of library?
I've found github issue regarding the problem, it's good idea to use exports-loader. My solution is:
webpack.config.js
...
// Add alias, so webpack looks for minified version of angular
resolve: {
alias: {
angular: "angular/angular.min.js"
}
}
...
// Add exports loader for angular
modules: {
loaders: [
{
test: /angular\.min\.js$/,
loader: 'exports?angular'
}
]
}
After this configuration we can easily import minified version of angular using the following command
let angular = require('angular');
// or es6 version
import angular from 'angular';
U can use angular cli and just type
ng build -prod
Then your minified file are in dist foldeer. It must be smaller, and u can upload that ini your public_html

Webpack resolve.root and TypeScript loader

Our project is using the webpack resolve.root option to import modules with absolute paths. (avoiding something like ../../../module)
In its current state the project is using babel-loader which works perfectly fine.
My task is to migrate the app to Angular 2.
Therefor I am currently in the process of transitioning to TypeScript.
Somehow it seems like the ts-loader does not work in combination with the resolve.root option of the webpack config.
Example of the webpack.config.js
resolve: {
root: [
path.resolve('./node_modules'),
path.resolve('./app'),
path.resolve('./app/lib'),
]
},
Example of a module import
import AbstractListState from 'states/abstract_list_state';
The states directory is inside the app/lib directory.
Error when executing webpack
ERROR in ./app/mainViews/panel/panel.controller.ts
Module not found: Error: Cannot resolve module 'states/abstract_list_state' in C:\Users\...\Project\app\mainViews\panel
# ./app/mainViews/panel/panel.controller.ts 4:28-65
Pre version 2.0 TypeScript will try to load modules with an absolute path from the node_modules directory. This is because TypeScript's module resultion is per default set to "node". Which means it works like node's require method. So, even if you're using webpack to build your app, TypeScript (and its compiler) will still want to load the files.
In order to let webpack import your modules with absolute path you have to go back and use the require method. This way TypeScript will let webpack import stuff. But of course you will not get any type-inference, autocomplete, ...
Or, you update to the TypeScript 2.0 beta and give this a try: https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#module-resolution-enhancements-baseurl-path-mapping-rootdirs-and-tracing

Categories