捆绑 npm package 并将其转换为 es 模块

Question

I want to import chessground into a project of mine. It seems it's a CommonJS module, so i used browserify to import it into my web page.

browserify -r chessground > chessground.js

In order to use it in my webpage, I use

const Chessground = require('chessground').Chessground

but I saw in this project that they import it like

import {Chessground} from 'chessground'

I know they are douing with webpack, but for the life of me I can't figure out how to bundle an entire npm package into one file AND convert it into an ES module. Can anyone help me?

Answer 1

There is noway to bundle your packages without using a bundler like webpack or rollup.js .

If it is necessarily to use task runner you may find a way to make the bundler work with your task runner .

I had the same problem with gulpjs and wepack , and it was really painful to make it work. The solution was using a webpack and webpack plugins in gulpjs .

const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const path = require('path');

const webapckJsConfig = {
  mode: (process.env.APP_ENV === 'dev' && process.env.APP_DEBUG === 'true') ? 'development' : 'production',
  devtool: (process.env.APP_ENV === 'dev' && process.env.APP_DEBUG === 'true') ? 'source-map' : false,
  entry: {
    // Website JS Files
    'website/home.js': './resources/js/website/home.js',
    'website/notfound.js': './resources/js/website/notfound.js',
    'website/error.js': './resources/js/website/error.js',

    // Admin JS Files
    'admin/home.js': './resources/js/admin/home.js',
    'admin/notfound.js': './resources/js/admin/notfound.js',
  },
  output: {
    path: path.resolve(__dirname, 'public/'),
    filename: '[name]',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

// JavaScript lint Cehck ✅ Convert 🔂 Compresse 🔄 Output ↪ 📁 public/js
async function scripts() {
  return gulp
    .src(`${JAVASCRIPT_DIR}/**/*.js`)
    .pipe(webpackStream(webapckJsConfig), webpack)
    .pipe(gulp.dest(`${JS_PUBLIC_DIR}`));
}
exports.scripts = scripts;

you can also check it here

You can of course take the webpack configuration and put them in external file, but you have to consider that you will confuse other developers because they will think webpack is independent and start to use it as an independent tool, so that's why I keep it in gulp.js .