ES6项目（二）模块打包发布（npm、webpack、umd）

最新推荐文章于 2025-06-04 21:20:26 发布

原创最新推荐文章于 2025-06-04 21:20:26 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

ES6 同时被 2 个专栏收录

2 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

这篇博客详细介绍了如何进行ES6项目的模块打包，包括使用webpack和babel进行项目搭建，以及参考How to Publish a Package进行模块发布。重点讨论了配置webpack以支持UMD模块，使得代码能在不同环境中运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 模块打包

参考ES6项目（一）项目搭建（webpack、babel、react）

2. 模块发布

参考How to Publish a Package

3. 配置webpack和umd（重要事项）

module.exports = {
  entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/lib/",//打包后的文件存放的地方
    filename: "index.js", //打包后输出文件的文件名
    libraryTarget: "umd", //配置模块导出（解决模块导入引用为空问题）
    library: "minsmap",
    auxiliaryComment: "Test Comment"
  },
  //mode: 'production',
  //devtool: 'eval-source-map',
  devServer: {
    contentBase: "./lib",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    proxy: {
      '/neo4j': {
        target: 'http://127.0.0.1:8080/',
        secure: false
      }
    }
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
}

支持umd

output: {
    path: __dirname + "/lib/",//打包后的文件存放的地方
    filename: "index.js",//打包后输出文件的文件名
    libraryTarget: "umd",
    library: "minsmap",
    auxiliaryComment: "Test Comment"
},

`output.auxiliaryComment`

string object

在和 output.library 和 output.libraryTarget 一起使用时，此选项允许用户向导出容器(export wrapper)中插入注释。要为 libraryTarget 每种类型都插入相同的注释，将 auxiliaryComment 设置为一个字符串：

output: {
  library: "someLibName",
  libraryTarget: "umd",
  filename: "someLibName.js",
  auxiliaryComment: "Test Comment"
}

将会生成如下：

(function webpackUniversalModuleDefinition(root, factory) {
  // Test Comment
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require("lodash"));
  // Test Comment
  else if(typeof define === 'function' && define.amd)
    define(["lodash"], factory);
  // Test Comment
  else if(typeof exports === 'object')
    exports["someLibName"] = factory(require("lodash"));
  // Test Comment
  else
    root["someLibName"] = factory(root["_"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
  // ...
});

对于 libraryTarget 每种类型的注释进行更细粒度地控制，请传入一个对象：

auxiliaryComment: {
  root: "Root Comment",
  commonjs: "CommonJS Comment",
  commonjs2: "CommonJS2 Comment",
  amd: "AMD Comment"
}