如何创建编译typescript并为JavaScript文件创建映射的grunt任务

我不熟悉Grunt、Typescript、Webpack和Loader；并试图理解这些工具的文档。ts加载器很方便地引用了本教程，本教程很有帮助，但并不完全符合我的需要

我们的项目正在使用Typescript以及JavasCript和JSX，我们一直在使用

grunt ts

任务将Typescript编译为JavasCript，包括一个sourcemap。javascript最终被编译在一起，然后进行压缩，最终生成一个min文件和一个相应的sourcemap文件。不幸的是，sourcemap似乎从未在最终产品中包含typescript javascript。我们知道这一点，因为我们永远看不到typescript从生产环境中创建的javascript源文件；只有常规的javascript文件

我们认为可以尝试修改grunt文件中现有的webpack任务，以便它使用ts加载器而不是ts编译器来编译、缩小和提供映射。我希望ts加载器将编译并生成所需的映射

现有的grunt任务是

 webpack: {
        options: {
            entry: webpackEntry,
            output: {
                path: webpackDest,
                filename: 'our-react-min.js',
                library: ["LIB", "apps"],
                libraryTarget: "assign",
                pathInfo: true
            },
            externals: grunt.file.readJSON('our-ui/webpack-externals.json'),
            stats: {
                // Configure the console output
                colors: true,
                modules: false,
                reasons: true
            },
            progress: true
        },
        prod: {
            stats: {
                colors: false,
                modules: true,
                reasons: true
            },
            plugins: [
                new webpack.optimize.UglifyJsPlugin(),
                new webpack.optimize.OccurenceOrderPlugin(),
                new webpack.optimize.DedupePlugin()
            ]
        },
        dev: {
            debug: true,
            devtool: 'inline-source-map',
            cache: true
        }
    }, ...

我现在把它变成这样：

     webpack: {
        options: {
            entry: webpackEntry,
            output: {
                path: webpackDest,
                filename: 'our-react-min.js',
                library: ["LIB", "apps"],
                libraryTarget: "assign",
                pathInfo: true
            },
            resolve: {
                // Add `.ts` and `.tsx` as a resolvable extension.
                extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
            },
            module: {
                loaders: [
                    // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
                    { test: /\.tsx?$/, loader: 'ts-loader' }
                ]
            },
            ts: {
                "compilerOptions": {
                    "target": "es5",
                    "sourceMap": true,
                    "jsx": "react",
                    "experimentalDecorators": true
                },
                "exclude": [
                    "node_modules"
                ]
            },
                           externals: grunt.file.readJSON('our-ui/webpack-externals.json'),
            stats: {
                // Configure the console output
                colors: true,
                modules: false,
                reasons: true
            },
            progress: true
        },
        prod: {
            stats: {
                colors: false,
                modules: true,
                reasons: true
            },
            plugins: [
                new webpack.optimize.UglifyJsPlugin(),
                new webpack.optimize.OccurenceOrderPlugin(),
                new webpack.optimize.DedupePlugin()
            ]
        },
        dev: {
            debug: true,
            devtool: 'inline-source-map',
            cache: true
        }
    }, ...

我们的构建根据环境调用

grunt-webpack:dev

或

grunt-webpack:prod

运行之后，使用闭包编译器将所有JavaScript一起缩小；指向贴图文件的注释引用随后附加到一分钟文件的末尾。我试图解决的问题是缺少用于生产类型脚本编译的java脚本的源映射。除了从typescript创建的javascript之外，所有东西都有源映射

我一直在测试

在命令行上运行

grunt webpack:prod

，然后在正确的位置查找min和map文件（它们在那里；可能包含非ts javascript）

在prod模式下部署war，并在sourcemap设置为on的情况下从浏览器开发工具中查找预期的JavaScript文件

我仍然无法在浏览器中找到源文件

---

这项繁重的任务正确吗？还是其他地方的问题…？

我也使用了

grunt ts

，但在我的情况下，为了使一切正常工作，我这样做了：

在我的Gruntfile中：

    ts: {
        default: {
            tsconfig: true,
        },
        options: {
            fast: 'never'
        }
    }

在我的tsconfig.json中：

{
  "compileOnSave": true,
  "compilerOptions": {
    "removeComments": true,
    "noImplicitAny" : false,
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "compiled",
    "watch": true
  },
  "exclude": [
    "node_modules"
  ]
}

在我的例子中，只有设置tsconfig文件，它才能完美工作

希望它能帮助你

---

注：这些是我在tsconfig上的选项，您可以将您的选项设置为类似于

咕噜ts

选项。

我也使用

咕噜ts

，但在我的情况下，为了使一切正常工作，我这样做了：

在我的Gruntfile中：

    ts: {
        default: {
            tsconfig: true,
        },
        options: {
            fast: 'never'
        }
    }

在我的tsconfig.json中：

{
  "compileOnSave": true,
  "compilerOptions": {
    "removeComments": true,
    "noImplicitAny" : false,
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outDir": "compiled",
    "watch": true
  },
  "exclude": [
    "node_modules"
  ]
}

在我的例子中，只有设置tsconfig文件，它才能完美工作

希望它能帮助你

---

注：这些是我在tsconfig上的选项，您可以将您的选项设置为类似于您的

咕噜ts

选项。

我有一个部分答案。在prod部分中，我缺少源映射devtool。但是，这个源映射映射回JavaScript文件，而不是Typescript源文件

    ...    },
    prod: {
        devtool: 'source-map',
        stats: {
....

---

我有一个部分的答案。在prod部分中，我缺少源映射devtool。但是，这个源映射映射回JavaScript文件，而不是Typescript源文件

    ...    },
    prod: {
        devtool: 'source-map',
        stats: {
....

---

我不能使用tsconfig文件。我在grunt任务中使用ts选项。看，明白了。但是我在ts grunt任务中也遇到了同样的问题，所以我的解决方案是使用grunt任务，但是使用tsconfig.json，这就完成了工作。我会考虑其他的解决方案。谢谢！我从doco中了解到编译器选项可以在tsconfig.json中，也可以在grunt任务中；任务中的选项将覆盖tsconfig.json中的选项。但是从它的措辞来看，我不确定在这两种情况下是否必须存在tsconfig文件，我不能使用tsconfig文件。我在grunt任务中使用ts选项。看，明白了。但是我在ts grunt任务中也遇到了同样的问题，所以我的解决方案是使用grunt任务，但是使用tsconfig.json，这就完成了工作。我会考虑其他的解决方案。谢谢！我从doco中了解到编译器选项可以在tsconfig.json中，也可以在grunt任务中；任务中的选项将覆盖tsconfig.json中的选项。但是从它的措辞来看，我不确定在这两种情况下是否必须存在tsconfig文件。