browserify (coffeeify)에서 UglifyJS2를 통해 bundle.min.js.map을 만드는 레시피
10090 단어 browserifyuglifyjs자바스크립트CoffeeScript
.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)
{
"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
<script src="bundle.min.js"></script>
상기 커맨드와 동등한 처리를 프로그램으로 실시하는 경우는, 아래와 같이 됩니다.
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)
Reference
이 문제에 관하여(browserify (coffeeify)에서 UglifyJS2를 통해 bundle.min.js.map을 만드는 레시피), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/59naga/items/60e7563f19140f66bb62텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)