Struggling to create and set up an npm package for use in browser environments, particularly with generating the index file.
Currently have the testpackage linked to my test application using npm link in both project directories. The test application is configured with webpack and babel, written in es6 utilizing import and export.
The source code is written in es6 and transpiled using babel. Below is a snippet from the package.json file showing the build command:
{
"name": "testpackage",
"main": "index.js",
"scripts": {
"build": "babel src --out-dir dist",
"lint": "eslint ."
},
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
}
}
Attempted to create the index.js file in two ways, first using es6 syntax and then as module.exports, but encountering issues with both approaches.
// es6 index.js in testpackage
import store from './dist/store';
import attach from './dist/attach';
export {store, attach};
--
// index.js with modules.exports
const path = require('path');
module.exports = {
store: require(path.resolve(__dirname, './dist/store')),
attach: require(path.resolve(__dirname, './dist/attach'))
}
In the es6 case, the test application importing testpackage is unable to find the dist directory.
Module not found: Error: Can't resolve 'dist/store' in '/usr/local/apps/testpackage'
With the second approach, the code seems geared towards node execution, but instead of being transpiled by webpack and babel in the test app, it's directly loaded into the browser.
What crucial element am I overlooking in this setup?