50595

[code]

    // webpack.config.js
    
    const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    module.exports = {
      mode: 'production',
      entry: './input.js',
      output: {
        filename: 'output.js'
      },
      optimization: {
        minimizer: [
          new uglifyJsPlugin({
            uglifyOptions: {
              output: {
                comments: /^!/
              }
            }
          })
        ]
      }
    }
    
[/code]

`uglifyjs-webpack-plugin` を使って `/*!`
で始まるライセンスコメントを残したい場合、上記のように設定すればよいと思うのですが、以下のような `input.js`
で即時関数の前にコメントがあると、認識されずに消されてしまいます。

[code]

    /*!
      Comments
    */
    ;(function() {
    
    [1, 2, 3].forEach(function(v) {
      console.log(v)
    })
    
    })()
    
[/code]

どうすれば、ライセンスコメントを残したままにできるでしょうか。


CC BY-SA 4.0
2018-11-24T12:14:41.473
50590
2018-11-24T17:09:40.863
2018-11-24T12:32:28.513
3060
19687
question
javascript node.js webpack
uglifyjs-webpack-pluginでライセンスコメントを残したい


まず原因ですが、[UglfyJSのReadme](https://github.com/mishoo/UglifyJS2#keeping-
copyright-notices-or-other-comments)にある

> however, that there might be situations where comments are lost.

と同等の状態になっているようです。具体的には即時関数の **前**
に`;`がついていることにより、この`;`から前は不要な文として先にドロップされてしまっているため（この際にコメントも一緒に失われている）のようです。

このセミコロン、モジュールシステムを採用していないレガシーなコードで誤動作を防止するために使われていたものだったかと思いますが、まあwebpackを用いる場合は無用でしょう。

もし自身で書かれたコードなのであれば先頭のセミコロンを除去するだけで求められる挙動になるでしょう。

とはいえ、自分の書いたコードならともかく既存のライブラリ等を利用しているのであれば改変するわけにもいかないといった話でしょうか。その場合、なんらかのloader等でこの邪魔なセミコロンを削ぎ落としてやればよさそうです。

冗長であまりいい方法とは思えないのですが、試しにprettier-loaderを通すようにしたところ提示されたコードにおいては期待通りの出力ができました。

[code]

    // webpack.config.js
    
    const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
    
    module.exports = {
      //  mode: 'production',
      entry: './input.js',
      output: {
        filename: 'output.js'
      },
      module: {
        rules: [
          {
            test: /\.jsx?$/,
            use: {
              loader: 'prettier-loader',
            }
          }
        ]
      },
      optimization: {
        minimizer: [
          new uglifyJsPlugin({
            uglifyOptions: {
              output: {
                comments: /^!/,
              }
            }
          })
        ]
      },
    }
    
[/code]

[code]

    // output.js
    !function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t){
    /*!
      Comments
    */
    [1,2,3].forEach(function(e){console.log(e)})}]);
    
[/code]

コードに寄ってはこの限りではないかもしれませんし、別の対処法もある気もします。


CC BY-SA 4.0
2018-11-24T17:09:40.863
50595
2018-11-24T17:09:40.863
2376
50590
answer