I have been coding with a React frontend and a Node/Express backend. But sometimes, I only need some plain Javascript without React, but still want the benefit of NPM and other Node modules. What is a way to do this?
You'll need a module bundler of some kind. There are many options including Webpack, Browserify, Gulp, and Parcel.
For Webpack, for example, from their example docs, the process could be:
Install webpack with npm install webpack and install webpack-cli
Install a module you want to use on the frontend, eg lodash
In src/index.js, import lodash: import _ from 'lodash'; and use it as needed. (You can also import other modules from NPM or from other places in your source code)
Set up webpack.config.js if you need custom build configuration settings
Run webpack to build the project: npx webpack. A single bundled JavaScript file will be created which contains all your source code and the imported Lodash's source code.
Related
I have a node library that I'm developing called 'MyLib' that is compiled to a dist/my-lib.js file using the webpack command.
Now, I have another project that makes use of that library. I "included" it by doing:
npm install --save ../../my-library
And in my project's index.js I can do:
import { ExportedClass } from 'my-library'
...
const ec = new ExportedClass()
So far so good. Now, I make some changes to the lib and include some feature that uses a certain babel config, then I build the library and go back to the main project, but now the main project fails to compile and complains about a missing/disabled babel-loader config? Why?
Error in /.../my-library/src/MyClass.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /.../my-library/src/MyClass.js: Support for the experimental syntax 'classProperties' isn't currently enabled (17:14)
Isn't the purpose of building the other library is to be able to just import and use it? Why do I have to replicate its build env and dependencies in my project?
For context: Both my project and library are built using webpack and in development mode with target: node.
Good day,
I'm currently new in integration vue.js in webpack.
Basically, I'm trying to use a 3rd party package that I've already installed inside in my node_modules.
In this example, I installed a package called "Vuex Toast" (an alert for vue.js). NPM Package here
Here's my project structure.
.../js/main.build.js
.../src-modules/app.js (blank for now)
Normally, everytime I run webpack command, I generate my main.build.js
Can someone help me how to use that 3rd party package here?
The idea of webpack (and bundlers in general) is that you require code and webpack bundles it for you.
In your app.js do the following:
const vuexToast = require('vuex-toast');
Now you can use it. Webpack will know to check your node_modules/vuex-toast folder.
So I forked a package in the git. Made my changes. Then in my terminal
npm install --save git+https://github.com/hayk94/ddp.js.git
And then I try to import the package in my code as this
import DDP from 'ddp.js'
But webpack gives me this error
ERROR in ./main.js
Module not found: Error: Can't resolve 'ddp.js' in '/Users/hayksafaryan/projects/b2cEmbedLib'
# ./main.js 23:11-28
# multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./main.js
webpack: Failed to compile.
However webpack works fine if I install the package from npm.
I import the package as in the docs, however maybe there is some other way for git installed packages?
The entry point of the package is lib/ddp.js, but that file doesn't exist in the repository. It is very common that libraries build their libraries before publishing to npm, so that they can use newer JavaScript features but still provide support for older versions that don't support them. This is done with the prepublish hook, which is automatically run before the package is published (when you run npm publish). With that, the built files don't end up in the repository, as it would mainly clutter up your commits. Some people decide to check them in so they can use it directly from there, which has become quite rare because these use-cases are generally covered by services like Unpkg.
You have several possibilities to use it from a git repository.
Check in the built files.
Build the files after installing. Either manually or with a postinstall hook. (not recommended)
Change the entry point to src/ddp.js. If you need to transpile the files, this isn't a valid option, even though you could theoretically whitelist the package in your webpack config, so it gets transpiled (assuming you were excluding node_modules from being transpiled).
Publish the package to npm under your namespace (#yourusername/ddp.js) and use that. For details see Working with scoped packages.
I'm using npm pack to export a local package to use in projects. It uses es6, jsx and other new features. So when I run npm install <tarball> in my new project, it gets unexpected token errors when it tries to import the package. I tried to having an prepublish script that used my webpack config file to compile to /dist and then set the package.json's main key to dist/compiledPackage.js but I wasn't able to import that package either. I simply want to export my React Component to use in other projects by running npm install ThatReactComponentTarBall. How can I do this?
I'm trying to import a browser build for the elasticsearch.js client. I'm using npm as my package manager since EmberJS (v2.13.1) is moving away from bower:
npm install elasticsearch-browser
Few questions:
Can I directly import the module as it is "built for the browser" and probably doesn't use any CommonJS syntax? If yes, what would the import statement look like?
Am I required to use browserify to import any module I install from the npm registry? Why? How do I know which packages are browser-ready?
I could install the module through bower and then do an app.import in the ember-cli-build.js file. Would that work?
As I understand, it finally comes down to using bower vs installing browserify, correct? But I still don't understand why I should have to use a transpiler.