分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了捆绑一个 npm 包并将其转换为 es 模块，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决捆绑一个 npm 包并将其转换为 es 模块？

开发过程中遇到捆绑一个 npm 包并将其转换为 es 模块的问题如何解决？下面主要结合日常开发的经验，给出你关于捆绑一个 npm 包并将其转换为 es 模块的解决方法建议，希望对你解决捆绑一个 npm 包并将其转换为 es 模块有所启发或帮助；

我想将 chessground 导入到我的一个项目中。看起来它是一个 Commonjs 模块，所以我使用 browserify 将它导入到我的网页中。

browserify -r chessground > chessground.Js

为了在我的网页中使用它，我使用

const chessground = require('chessground').Chessground

但我在 this 项目中看到他们像这样导入它

import {ChessgrounD} from 'chessground'

我知道他们正在使用 webpack，但在我的一生中，我无法弄清楚如何将整个 npm 包捆绑到一个文件中并将其转换为 ES 模块。有人可以帮我吗？

解决方法

如果不使用 webpack 或 rollup.js 之类的打包器，就无法打包您的包。

如果必须使用任务运行器，您可以找到一种方法让打包器与您的任务运行器一起工作。

我在使用 gulpjs 和 wepack 时遇到了同样的问题，让它工作真的很痛苦。解决方案是在 gulpjs 中使用 webpack 和 webpack 插件。

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;