发布使用 webpack 和 babeljs 构建的 npm 包

Question

I built a very simple javascript that uses webpack for packaging and npm for publishing the project. While I am able successfully build and publish the project, I am unable to use the exported function.

Here is my package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/test-prod.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --display-error-details --mode production",
    "prepublishOnly": "npm run build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  }
}

Here is the webpack config:

const path = require('path');

module.exports = {
    context: path.resolve(__dirname),
    entry: './index.js', // Entry file that will be invoked by webpack first
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'test-prod.js'
    }
};

Here is test function located inside 'src' folder I am planning to export:

export const testFunc = () => alert('Hello World!');

Here is the index.js:

const testFunc = require("./src/testFunc");

module.exports = {testFunc};

This is all and well. But after performing npm publish or npm link , I am unable to access the testFunc from another project.

I tried import * as functions from 'test'; , followed by functions.testFunc() and import {testFunc} from 'test'; . Both does not work.

Please let me know how to properly export a function using webpack & npm, and access it from a different project. I only need the minified javascript in my published package.

Answer 1

Try this.

In the webpack config file, add this

    output: {
        // your current code
        library: 'test',
        libraryTarget: 'umd'
    }