browserify (coffeeify)에서 UglifyJS2를 통해 bundle.min.js.map을 만드는 레시피

bower로 출시하는 경우 .js 그래서 다음 해결책입니다.
.
├── bundle.js
├── bundle.js.map
├── bundle.min.js
├── bundle.min.js.map
└── index.coffee

절차로서
  • .min.js .min.js.map 선택적으로 인라인 소스 맵 생성
  • browserify < browserify로 생성 된 인라인 소스 맵을 파일로 변환
  • --debug < 보통 bundle.js.map 한다
  • exorcist < bundle.js 에서 browserify 압축. 그럼, bundle.min.js 선택적으로 uglifyjs를 먹는다
  • bundle.js < 소스 맵의 재출력처를 --in-source-map

    동작 확인 방법


    {
      "name": "uglify-with-map",
      "scripts": {
        "start": "browserify index.coffee --transform coffeeify --debug | exorcist bundle.js.map -b . > bundle.js",
        "poststart": "uglifyjs bundle.js --in-source-map bundle.js.map --mangle --compress --output bundle.min.js --source-map bundle.min.js.map"
      },
      "dependencies": {
        "browserify": "^11.1.0",
        "coffeeify": "^1.1.0",
        "exorcist": "^0.4.0",
        "uglify-js": "^2.4.24"
      }
    }
    
    

    다음과 같이 명령을 실행하면됩니다.
    echo 'this is coffee script' > index.coffee
    tree .
    # .
    # ├── index.coffee
    # └── package.json
    
    npm install
    # ...
    npm start
    # browserify index.coffee --transform coffeeify --debug | exorcist bundle.js.map -b . > bundle.js
    # uglifyjs bundle.js --in-source-map bundle.js.map --mangle --compress --output bundle.min.js --source-map bundle.min.js.map
    
    tree . -L 1
    # .
    # ├── bundle.js
    # ├── bundle.js.map
    # ├── bundle.min.js
    # ├── bundle.min.js.map
    # ├── index.coffee
    # ├── node_modules
    # └── package.json
    

    생성 된 bundle.js.map를 적절하게 bundle.min.js.map로로드하면

    index.html
    <script src="bundle.min.js"></script>
    



    위와 같이 컴파일 원본의 행 수가 표시되어 소스 맵을 이식할 수 있는지 확인할 수 있습니다.
    --source-map 했다 bundle.min.js 와 같은 명령은, index.html 경유하지 않으면 동작하지 않는 것에 주의해 주세요.

    프로그램을 통해 할 경우



    상기 커맨드와 동등한 처리를 프로그램으로 실시하는 경우는, 아래와 같이 됩니다.
    tree . -L 1
    # .
    # ├── index.coffee
    # ├── node_modules
    # ├── package.json
    # └── task.js
    
    node task.js
    

    task.js
    // Dependencies
    var browserify= require('browserify');
    var exorcist= require('exorcist');
    var uglifyjs= require('uglify-js');
    
    var fs= require('fs');
    
    // Environment
    var bundle= {
      js: 'bundle.js',
      min: 'bundle.min.js',
    };
    
    // Main
    browserify('index.coffee',{
      transform: 'coffeeify',
      debug: true,
    })
    .bundle()
    .pipe(exorcist(bundle.js+'.map',null,null,'.'))
    .pipe(fs.createWriteStream(bundle.js),'utf8')
    .on('close',function(){
      var minified= uglifyjs.minify(bundle.js,{
        mangle: true,
        inSourceMap: bundle.js+'.map',
        outSourceMap: bundle.min+'.map',
      });
    
      fs.writeFileSync(bundle.min,minified.code);
      fs.writeFileSync(bundle.min+'.map',minified.map);
    })
    

    참고 : The simple way - mishoo/UglifyJS2(github)
  • 좋은 웹페이지 즐겨찾기