0

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

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

我们认为我们可以尝试修改 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 都使用闭包编译器一起缩小；然后将指向地图文件的注释引用附加到一分钟文件的末尾。我要解决的问题是缺少用于生产 typescript 编译的 java 脚本的源映射。除了从 typescript 创建的 javascript 之外，源映射适用于所有内容。

我一直在测试

  1. 在命令行上运行grunt webpack:prod，然后在正确的位置查找 min 和 map 文件（它们在那里；可能包含非 ts javascript）

  2. 像在 prod 模式下一样部署战争，并在 source-map 设置打开的情况下从浏览器开发工具中查找预期的 JavaScript 文件。

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

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

4

2 回答 2

4

我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选项。

于 2016-03-29T13:55:13.967 回答
0

我有一个部分答案。在产品中，我缺少源映射开发工具。但是，这个映射回 JavaScript 文件的源映射，而不是 Typescript 源文件

    ...    },
    prod: {
        devtool: 'source-map',
        stats: {
....
于 2016-03-30T16:32:44.563 回答