将 CoffeeScript 转换为 TypeScript

Question

我有一个用 CoffeeScript 编写的项目。

我想分段改写成TypeScript。但是当我尝试 required coffee 时，出现找不到模块的错误。

有机会解决这个问题吗？

webpack.config.js

var webpack           = require("webpack"),
path              = require("path"),
ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
entry  : {
    "app"  : "./public/app/start.coffee",
    "style": "./sass/application.scss"
},
output : {
    path    : path.join(__dirname, "/build"),
    filename: "[name].js"
},
resolve: {
    extensions: ["", ".js", ".coffee", ".ts", ".html"],
    root      : [
        path.join(__dirname, "/public"),
        path.join(__dirname, "/public/vendor"),
        path.join(__dirname, "/sass"),
        path.join(__dirname, "/public/templates")
    ],
    alias     : {
        marionette                   : path.join(__dirname, "/public/vendor/backbone.marionette"),
        leaflet                      : path.join(__dirname, "/public/vendor/leaflet/dist/leaflet-src"),
        "leafletDraw"                : path.join(__dirname, "/public/vendor/leaflet/leaflet.draw"),
        "leafletDrawLocal"           : path.join(__dirname, "/public/vendor/leaflet/leaflet.draw.local"),
        "leafletZoom"                : path.join(__dirname, "/public/vendor/leaflet/leaflet.zoomSlider"),
        "leafletMeasure"             : path.join(__dirname, "/public/vendor/leaflet/leaflet.measure"),
        "leafletContextmenu"         : path.join(__dirname, "/public/vendor/Leaflet.contextmenu/dist/leaflet.contextmenu"),
        "leafletCluster"             : path.join(__dirname, "/public/vendor/leaflet.markercluster/dist/leaflet.markercluster-src"),
        "leafletLabel"               : path.join(__dirname, "/public/vendor/leaflet/leaflet.label"),
        "leafletMarkerRotate"        : path.join(__dirname, "/public/vendor/leaflet/leaflet.Marker.Rotate"),
        "jqueryCookie"               : path.join(__dirname, "/public/vendor/jquery.cookie"),
        validation                   : path.join(__dirname, "/public/vendor/backbone.validation"),
        sweet                        : path.join(__dirname, "/public/vendor/sweet-alert"),
        "bootstrapDatepicker"        : path.join(__dirname, "/public/vendor/bootstrap.datepicker"),
        "momentLocale"               : path.join(__dirname, "/public/vendor/moment.locale"),
        toggle                       : path.join(__dirname, "/public/vendor/bootstrap-toggle"),
        "jqueryFileupload"           : path.join(__dirname, "/public/vendor/jquery.fileupload"),
        "jquery.fileupload-audio"    : path.join(__dirname, "/public/vendor/jquery.fileupload-audio"),
        "jquery.fileupload-image"    : path.join(__dirname, "/public/vendor/jquery.fileupload-image"),
        "jquery.fileupload-jquery-ui": path.join(__dirname, "/public/vendor/jquery.fileupload-jquery-ui"),
        "jquery.fileupload-process"  : path.join(__dirname, "/public/vendor/jquery.fileupload-process"),
        "jquery.fileupload-ui"       : path.join(__dirname, "/public/vendor/jquery.fileupload-ui"),
        "jquery.fileupload-validate" : path.join(__dirname, "/public/vendor/jquery.fileupload-validate"),
        "jquery.fileupload-video"    : path.join(__dirname, "/public/vendor/jquery.fileupload-video"),
        "jqueryIframe-transport"     : path.join(__dirname, "/public/vendor/jquery.iframe-transport"),
        "jqueryUIWidget"             : path.join(__dirname, "/public/vendor/jquery.ui.widget"),
        "datetimepicker"             : path.join(__dirname, "/public/vendor/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min"),
        "colorpicker"                : path.join(__dirname, "/public/vendor/bootstrapcolorpicker/dist/js/bootstrap-colorpicker"),
        "jqueryMagnific-popup"       : path.join(__dirname, "/public/vendor/jquery.magnific-popup.min"),
        "paralleljs"                 : path.join(__dirname, "/public/vendor/parallel"),
        "heatcanvas-worker"          : path.join(__dirname, "/public/vendor/heatcanvas-worker"),
        "Worker"                     : path.join(__dirname, "/public/vendor/Worker"),
        "moment"                     : path.join(__dirname, "/public/vendor/moment/moment"),
        "templatesFile"              : path.join(__dirname, "/build/templates")
    }
},
module : {
    //noParse: /vendor/,
    loaders: [
        {test: /\.coffee/, loader: "coffee", exclude: /node_modules|vendor/},
        {test: /((?!\.d\.).)*\.ts/, loader: "ts", exclude: /node_modules|vendor/},
        {test: /\.html/, loader: "ejs"},
        {
            test   : /\.scss$/,
            loader : ExtractTextPlugin.extract("style", "css!autoprefixer!sass?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") + "&includePaths[]=" + path.resolve(__dirname, "./mixins/app_mixins")),
            exclude: /node_modules|vendor/
        },
        {
            test  : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url?limit=10000&mimetype=application/font-woff"
        },
        {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file"},
        {test: /underscore^\./, loader: "exports?_"},
        {test: /backbone^\./, loader: "exports?Backbone!imports?underscore,jquery"},
        {test: /leaflet\.measure/, loader: "imports?leafletDraw"},
        {test: /leaflet\.Marker\.Rotate/, loader: "imports?leaflet"}
    ]
},
plugins: [
    //new webpack.optimize.DedupePlugin(),
    //new webpack.optimize.OccurrenceOrderPlugin(true),

    new webpack.ProvidePlugin({
        $              : "jquery",
        jQuery         : "jquery",
        "window.jQuery": "jquery",
        L              : "leaflet",
        Backbone       : "backbone",
        Marionette     : "backbone.marionette",
        "_"            : "underscore",
        "moment"       : "moment"
    }),
    new ExtractTextPlugin('styles.css', {
        allChunks: true
    }),
],
bail   : false, //do not report the first error as a hard error instead of tolerating it
stats  : {
    colors: true
    //modules: true,
    //reasons: true
},
profile: {}
};

tsconfig.js

{
"compilerOptions"               : {
    "target"                    : "es5",
    "module"                    : "amd",
    "noEmit"                    : true,
    "removeComments"            : false,
    "declaration"               : false,
    "noLib"                     : false,
    "experimentalDecorators"    : true,
    "preserveConstEnums"        : false,
    "isolatedModules"           : true
},
"exclude"                       : [
    "node_modules",
    "vendor"
]
}

错误：

import * as application from "app/application";

ERROR in ./public/app/start.ts (26,30): error TS2307: Cannot find module 'app/application'

Answer 1

如果需要将非ts文件导入ts文件，则无法使用es6 import语法。使用：

var someModule = required("someModuePath")

将 CoffeeScript 转换为 TypeScript

Convert CoffeeScript to TypeScript

coffeescript

typescript

webpack

ts-loader