You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using VSCode to maintain an npmjs package.
In my test code in the same project as the package, intelliSense works fine for exported functions, showing parameter descriptions from comment blocks.
The problem is when I use webpack to create a bundle, and I import that bundle (locally or from npmjs.com). The intelliSense documentation does not appear.
This is not a showstopper but a great feature is missing.
Please advise.
The full (fully working) project is at https://www.npmjs.com/package/mobiwek61menu
The webpack_config.js for creating the package follows :
// Function: pack all js files into a single minified .js file.
// pardon the extensive comments. I am a hobbyist.
const path = require('path');
module.exports =
{
entry: '../src/PackageTreeEntry.tsx',
optimization: {
minimize: true //false //true // human readable if minimize if false
// NOT ME >> minimize: false
// This option enables tree shaking, which removes unused code from the bundle->
// ,usedExports: true,
},
mode: 'production', //'development', // development or production
// resolve is a fancy way of saying "look here for files to build graph". Extensions says use .js .jsx
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
// setup where to put minified output file "the bundle", and any assets like jpegs.
output: {
// specify bundle location.
// ../xyz is necessary if client uses local import of bundle; if node_modules is in
// parent folder, it causes React to mess up due to duplicate react's etc.
path: path.resolve(__dirname, '../../publicProj/npmjs_com/bundle-publish-public'),
filename: 'bundle.js', // name of combined file, the "bundle"
// https://webpack.js.org/configuration/output/#outputlibrarytype
// library type 'window' will not create a bundle file. It's for running as a server, or clicking on index.html.
// I think it means "make library available via the DOM window object"
// NOT ME >> library: { name: 'MyLibrary' , type: 'window' }
// type: 'commonjs2' works on client but not local serve or clicking on index.html
library: { type: 'commonjs2' }
},
externals: {
react: {
commonjs: 'react',
commonjs2: 'react',
amd: 'React',
root: 'React',
},
'react-dom': {
commonjs: 'react-dom',
commonjs2: 'react-dom',
amd: 'ReactDOM',
root: 'ReactDOM',
},
'react-router-dom': {
commonjs: 'react-router-dom',
commonjs2: 'react-router-dom',
// TODO: what are entries for amd and root??
},
},
// modules appears to be chunks of processing to do.
// In this case, there's 1 module which calls babel to convert jsx in React source to plain js
module: {
// jan 2025 typescript added. START of the babel rule
rules: [ // here's the first rule in the array of rules
{ // START of the babel rule
test: /\.(js|jsx|ts|tsx)$/, // feed files *.js and *.js to babel. ref:https://webpack.js.org/configuration/module/#ruletest
exclude: /node_modules/, // dont send these hundreds of files to babel! Client will download these itself upon "npm i"
use: { // ref: https://webpack.js.org/configuration/module/#ruleuse
loader: 'babel-loader',
options: { "presets": ["@babel/preset-typescript", "@babel/preset-env", "@babel/preset-react"] }
},
},
{ // this rule includes .css files
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
},
};
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I'm using VSCode to maintain an npmjs package.
In my test code in the same project as the package, intelliSense works fine for exported functions, showing parameter descriptions from comment blocks.
The problem is when I use webpack to create a bundle, and I import that bundle (locally or from npmjs.com). The intelliSense documentation does not appear.
This is not a showstopper but a great feature is missing.
Please advise.
The full (fully working) project is at https://www.npmjs.com/package/mobiwek61menu
The webpack_config.js for creating the package follows :
Beta Was this translation helpful? Give feedback.
All reactions