ES6项目(二)模块打包发布(npm、webpack、umd)

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"
}

你可能感兴趣的:(ES6,webpack)