I'm trying to bundle my app like
jspm bundle myapp/index.jsx --dev for development where my index.jsx has some imports..
import React from 'react'
import { store } from './store'
...
When I actually navigate to my application I can clearly see in the network tab that my reducers that are presently being imported inside of store.js are being loaded separately instead of as part of the build.js bundle produced.
Do I need to use bundling arithmetic to explicitly include these dependencies inside of my store? I thought the bundling was supposed to go through all the dependencies inside the module, bundling them inclusively?
Related
I'm trying to create a new NPM package with TypeScript & Node. The package just allows the users to use a data structure I built. I'm trying to figure what is the right entry point (the value of main) should be in my package.json file. As I understand, I'm going to compile the TypeScript files (which are located in src/) into dist/ directory and those files will be actually hosted in NPM.
So should I have index.ts or index.js? If it's index.ts I'll need to compile it as well right? If it's index.js, then I need to point it to dist/? I'm a bit confused about what is the "right"/"convention" way to do it. At the end, I just want users to be able to load the classes I export in my src/mylist.ts file (which being compiled to dist/mylist.js). Do I even need it?
I was reading the How to use the 'main' parameter in package.json? topic, but it only refers to JS project. How should it be in TypeScript?
As typescript is generally compiled before desctibution, you should compile it and use dist/index.js
You will need this do define what import {} from 'my-module' means (i.e. import {} from 'my-module' is threated same as import {} from 'my-module/dist/index.js')
If you don't publish your module and are not using it as a dependency of some other your module you don't need this at all, just make a scripts: { start: "tsx src/index.ts" } or whatever
I have a React project that's getting large, but I'm not ready to split into submodules . So I'd like the folder structure to reflect what will eventually be a spinoff package.
As I'm working with that setup I'd like to constrain the allowed imports to that sub folder, to especially not import React, so it'll be easier to split apart when the time is right.
example
/src
/ui #import React freely
/core #Don't allow React to be imported
// /core/request.ts
import React from 'react'; // Lint Error, cannot import React under this folder!
...
<code>
...
and if it did, it would show a lint error.
Any ideas?
I have a project which is created in Electron.js. It uses simple HTML files. But now I want to convert this app into a React app.
While using HTML files directly, I am able to use node modules like electron, requiring main app.js file and all.
After building the project with webpack, the React app will get converted into static files. So how can I access the node modules after the build?
I suggest you to use Electron-React boilerplate for your project. As this contains all the basic configurations for building electron-react project. Go through the electron-react docs and setup an initial electron-react app.
# First, clone the repo via git:
git clone --depth=1 https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
cd your-project-name
# And then install dependencies with yarn:
yarn
All the modules listed on dependencies on package.json will be bundled in the production stage. So the relevant modules can be accessed on the build stage too. You can create components with your html files.
Make sure enable nodeIntegration on your BrowserWindow, so the nodemodules can be accessed by the renderer process.
webPreferences: {
nodeIntegration: true
}
you can use the electron-jsx package to work (I'm the author of the package), is simple and easy
Only you need that in you index.html file:
<script>
require("electron-jsx")(__dirname, {
reactDir: "./react-sources",
})
</script>
<script react-src="./react-sources/index.jsx">
And you can work with react normal (without webpack), and, additional, you can call any node package with ES6 import for react
More info and docs for the package:
https://www.npmjs.com/package/electron-jsx
https://github.com/mdjfs/electron-jsx
PD: You also need set nodeIntegration to true
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
So I have this problem where I have created a project using create-react-app. I have another project common-components which has webpack and a build process and has all the common and shareable components. what I did was I npm link common-components and then npm link common-components inside the Main project to make it avaible as node module. now the problem is when I try importing the ES6 React components It gives a transpile error. and I know this why it throws that. It doesnt transpiled by the babel-loader I am using in the Main project. I tried include this in the entry. But It still doesnt transpiled which It should. I donnot wanna build it to es5 and then import. I wanted to import it as it is and then build it with the Main project.
webpack: include : ['/mainPath', "/sharecomponentpath"]