javascript - How can I publish an NPM module with both commonjs and es6 versions? - Stack Overflow

admin管理员组

文章数量:1326299

I have a module I want to publish to npm. I have found some "solutions" that are 4+ years old, examples using babel 5.x, and other problems that made the examples not work as shown.

Ideally I want to write my code using es6 and build/transpile with babel such that it can be imported with require() in scripts or import in modules.

Right now, here's my (sample) module that shows what I've tried.

// index.js
export default function speak () {
  console.log("Hello, World!");
}

// .babelrc
{
  "ments":false,
  "presets": [
      ["@babel/env", {"modules": "monjs"}]
  ],
  "plugins": [
    "@babel/plugin-transform-modules-monjs",
    "add-module-exports"
  ]
}

// package.json
{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel index.js -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/plugin-transform-modules-monjs": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-plugin-add-module-exports": "^1.0.2"
  }
}

And, finally, a demo script (demo.js)

// demo.js
const speak = require('./dist/index.js');
speak();

When I do npm run build and then node demo.js, it works as expected:

Hello, World!

I would also like to be able to have a module (add "type":"module" to package.json) and then use a demo.js file this way:

import speak from './dist/index.js';
speak();

However, I get this an error that a default export isn't available:

import speak from './dist/index.js';
       ^^^^^
SyntaxError: The requested module './dist/index.js' does not provide an export named 'default'

I don't really care what the answer is, I'd just like to know what the best practices are. Should I just export as ES6? Should I just require monjs? Is there a way of transpiling with two available targets?

Note:

• node v14.5.0
• npm v6.14.6
• @babel/core v7.10.5

I have a module I want to publish to npm. I have found some "solutions" that are 4+ years old, examples using babel 5.x, and other problems that made the examples not work as shown.

Ideally I want to write my code using es6 and build/transpile with babel such that it can be imported with require() in scripts or import in modules.

Right now, here's my (sample) module that shows what I've tried.

// index.js
export default function speak () {
  console.log("Hello, World!");
}

// .babelrc
{
  "ments":false,
  "presets": [
      ["@babel/env", {"modules": "monjs"}]
  ],
  "plugins": [
    "@babel/plugin-transform-modules-monjs",
    "add-module-exports"
  ]
}

// package.json
{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel index.js -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/plugin-transform-modules-monjs": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-plugin-add-module-exports": "^1.0.2"
  }
}

And, finally, a demo script (demo.js)

// demo.js
const speak = require('./dist/index.js');
speak();

When I do npm run build and then node demo.js, it works as expected:

Hello, World!

I would also like to be able to have a module (add "type":"module" to package.json) and then use a demo.js file this way:

import speak from './dist/index.js';
speak();

However, I get this an error that a default export isn't available:

import speak from './dist/index.js';
       ^^^^^
SyntaxError: The requested module './dist/index.js' does not provide an export named 'default'

I don't really care what the answer is, I'd just like to know what the best practices are. Should I just export as ES6? Should I just require monjs? Is there a way of transpiling with two available targets?

Note:

• node v14.5.0
• npm v6.14.6
• @babel/core v7.10.5

• javascript
• node.js
• npm
• babeljs
• transpiler

Share Improve this question Follow asked Jul 27, 2020 at 18:43 Sir RobertSir Robert 4,97688 gold badges4444 silver badges6262 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use a bundler like webpack or rollup in bination with babel. They provide options to pile to multiple targets. Normally any library code is piled to below targets:

1. ESM or MJS (Ecmascript modules)
2. UMD (Universal Modules)

You can also pile to CJS (CommonJS module) or IIFE (Immediately invoked function expression).

UMD and ESM are pretty much standard these days (esp. UMD because it is bination of IIFE, CJS and AMD).

You can explore official documentation for Webpack or Rollup. However, I have created a tool which you can use to achieve the output you are looking for. https://www.npmjs./package/rollup-boilerplate

You can check it out, play around with it, hack it. I think it can be good starting point. You can checkout this article to get started: https://medium./@contactsachinsingh/setting-up-a-rollup-project-under-two-minutes-fc838be02d0e

I hate plicating my packages by adding build steps and pulling in huge support libraries when they aren't necessary. To support both CommonJS require and ES6 import...from you don't need "a bundler like webpack or rollup in bination with babel".

1. Provide separate entry-point (aka "main") scripts for CommonJS and for Es6 like "x.cjs" and "x.mjs".
2. In package.json set type to module.
3. In package.json add a new top-level element like this:

In package.json set type to module. 4. Rename source your other source files to *.cjs and *.mjs as needed

本文标签： javascriptHow can I publish an NPM module with both commonjs and es6 versionsStack Overflow