TypeScript into ES6

Question

guys. I have stuck on small problem with converting TypeScript into JavaScript.

I have this code

import { someMethod } from 'someModule'

function *someGeneratorFunction(object : someObject) {
    someMethod();
}

When I try to convert it into ES5, I got a problem: Generator functions don't support by ES5 standart. And import is converting into require

But when I convert this code into ES6, I got a problem with import. Bcoz' it is converting not to require. It stays like import.

But stable Node doesn't support import construction. What I can do in this situation?

Need I to use this scheme: TypeScript->ES6->ES5 (via Babel)? Or there is another method?

"Generator functions don't support by ES5 standart." What exactly does that mean? If you mean that generators don't exist in ES5, then that's correct, but I'd imagine that typescript converts the generator to something that works in ES5. — Felix Kling
– Felix Kling, Commented Jan 7, 2017 at 20:31
@FelixKling TypeScript compilator convert generators as-is. When I do compilation with --target ES5 flag I got an exception: generators are only available when targeting into EcmaScript 2015 or Higher. — Henry Ford
– Henry Ford, Commented Jan 7, 2017 at 20:35

Felix Kling · Accepted Answer · 2017-01-07 20:48:47Z

3

What I can do in this situation?

You can tell TypeScript which module system you want to use. From the documentation:

To compile, we must specify a module target on the command line. For Node.js, use --module commonjs; for require.js, use --module amd
tsc --module commonjs Test.ts

answered Jan 7, 2017 at 20:48

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

federico scamuzzi · Accepted Answer · 2017-01-07 20:34:58Z

usually i use this configuration..

for typescript transpiling my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "app_build/",
    "target": "es6", // <-- TARGETING ES6
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": [
      "es5",
      "dom"
    ],
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    "app_build/js",
    "typings/main",
    "typings/main.d.ts"
  ]
}

My Webpack dev file (webpack.dev.js):

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');

module.exports = {
    entry: {
        "polyfills": "./polyfills.ts",
        "vendor": "./vendor.ts",
        "app": "./app/main.ts",

    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    output: {
        path: "./app_build",
        filename: "js/[name]-[hash:8].bundle.js"
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                loader: "babel-loader",

                // Skip any files outside of your project's `src` directory

                exclude: [
                  path.resolve(__dirname, "node_modules")
                ],
                // Only run `.js` and `.jsx` files through Babel
                test: /\.js/,

                // Options to configure babel with
                query: {
                    plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
                    presets: ['es2015', 'stage-0'], //<-- BABEL TRANSPILE
                }
            },
            {
                test: /\.ts$/,
                loader: "ts"
            },
            {
                test: /\.html$/,
                loader: "html"
            },
            //{
            //    test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
            //    loader: "file?name=assets/[name]-[hash:6].[ext]",
            //},
            {
                test: /\.(png|jpg|gif|ico)$/,
                //include:  path.resolve(__dirname, "assets/img"),
                loader: 'file?name=/assets/img/[name]-[hash:6].[ext]'
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
              //  exclude: /node_modules/,
                loader: 'file?name=/assets/fonts/[name].[ext]'
            },
            // Load css files which are required in vendor.ts
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),
        new CleanWebpackPlugin(
            [
                "./app_build/js/",
                "./app_build/css/",
                "./app_build/assets/",
                "./app_build/index.html"
            ]
        ),
        // inject in index.html
        new HtmlWebpackPlugin({
            template: "./index.html",
            inject: "body",
            //minifyJS: true,
            //minifyCSS: true,
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    devServer: {
        //contentBase: path.resolve(__dirname, "app_build/"),
        historyApiFallback: true,
        stats: "minimal"
    }
};

I use it for an Angular 2 project .. hope it helps you

I see from this config that you do converting from ES6 into ES5 with Babel. Probably it is the only option.
yes i do it because when i use typescript i want to use ALL es6 (some es7) features and then i use webpack with babel to transpile the js output from typescript in ES5..if you want you can also try to change the "target": "es6", to --> "target": "es5", in tsconfig.json ..but you loose some nice features ..it's just my idea :-)
Yeah, I wrote about it. When target is ES5 there is no generator support. But with ES6 target It compile import construction as-is. So I need to use this scheme: TypeScript into ES6. ES6 into ES5 (via Babel)

Collectives™ on Stack Overflow

TypeScript into ES6

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related