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

Question

我是 Grunt、Typescript、Webpack 和加载程序的新手；并尝试理解这些工具的文档。方便地，ts-loader 参考了本教程 http://www.jbrantly.com/typescript-and-webpack/，它很有帮助，但不是我所需要的。

我们的项目正在使用 Typescript 以及 JavasCript 和 JSX，并且我们一直在使用 grunt ts 任务将 typescript 编译为 javascript，包括 sourcemap。 java脚本最终全部编译在一起，然后压缩，最终生成一个最小文件和一个相应的源映射文件。不幸的是，sourcemap 似乎从未在最终产品中包含 typescript javascript。我们之所以知道这一点，是因为我们永远无法从生产环境中看到 typescript 创建的 javascript 源文件；只有常规 java 脚本文件。

我们认为我们可以尝试修改grunt文件中现有的webpack任务，使其使用ts-loader而不是ts编译器来编译，并缩小并提供一个映射。我希望 ts-loader 能够编译并生成所需的地图。

现有的 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 java脚本)
在生产模式下部署 war 并从浏览器开发工具中寻找预期的 JavaScript 文件，并启用源映射设置。

我仍然没有在浏览器中找到源文件。

这个繁重的任务正确吗？还是其他地方的问题...?

Answer 1

我也使用 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 文件时它才能完美地工作。

希望对您有所帮助。

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

Answer 2

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

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

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

How to create a grunt task that compiles typescript and creates a map for JavaScript files

gruntjs

typescript

webpack

ts-loader