新しい Web プロジェクトを開始しています。構成の最後の部分は、CoffeeScripts ファイルのデバッグを有効にすることです。
プロジェクト全体は、コーヒーを js にコンパイルして適切なマップ ファイルを生成する Grunt タスクを使用してビルドされていますが、IntelliJ で Coffeescript のデバッグ作業を行うことはできません。
IntelliJ File Watcher を使用したくないことに注意してください。
ここに私の Gruntfile があります:
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON('package.json')
coffee:
options:
sourceMap: true
files:
expand: true
flatten: true
cwd: 'src/'
src: ['**/*.coffee']
dest: 'src/'
ext: '.js'
concat:
option:
separator: ';'
dist:
src: ['src/**/*.js']
dest: 'dist/<%= pkg.name%>.js'
uglify:
options:
banner: '/*! <%= pkg.name %> v<%= pkg.version%> by Pierre Degand <%= grunt.template.today("dd-mm-yyyy") %> */\n'
dist:
files:
'lib/<%= pkg.name%>.min.js': ['<%= concat.dist.dest %>']
watch:
files: ['<%= coffee.files.src %>']
tasks: ['coffee', 'concat', 'uglify']
grunt.loadNpmTasks('grunt-contrib-concat')
grunt.loadNpmTasks('grunt-contrib-uglify')
grunt.loadNpmTasks('grunt-contrib-coffee')
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.registerTask('default', ['coffee', 'concat', 'uglify'])
私のシンプルなCoffeeScriptファイル(ブレークポイントはIntelliJの2行目にあります):
name = 'Pierre'
console.log "Hello #{name} !"
Grunt から生成された JS ファイル:
(function() {
var name;
name = 'Pierre';
console.log("Hello " + name + " !!");
}).call(this);
/*
//@ sourceMappingURL=app.js.map
*/
ソースマップ
{
"version": 3,
"file": "app.js",
"sourceRoot": "",
"sources": [
"app.coffee"
],
"names": [],
"mappings": "AAAA;CAAA,GAAA,EAAA;;CAAA,CAAA,CAAO,CAAP,IAAA;;CAAA,CACA,CAAA,CAAa,CAAb,EAAO,CAAM;CADb"
}
最後に、テストに使用する html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="src/app.js"></script>
</body>
</html>
File watchers を使用したとき、.js と .map.js は .coffee ファイルのサブファイルでした。File Watchers を使用せずに同じ動作を実現できますか?
IntelliJ で「debug index.html」を右クリックすると、「Hello Pierre!!」と表示されます。私のIntelliJデバッガーコンソールでは、スクリプトは壊れていませんconsole.log()
誰かが同じトラブルを抱えていましたか?
ありがとう!