TypeScript в ES6

Question

ребята. Я столкнулся с небольшой проблемой при преобразовании TypeScript в JavaScript.

У меня есть этот код

import { someMethod } from 'someModule' 

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

Когда я пытаюсь преобразовать его в ES5, я получил задачу: функции генератора не поддерживают с помощью ES5 Standart. И import преобразуется в require

Но когда я конвертирую этот код в ES6, у меня возникла проблема с import. Bcoz 'преобразуется не в require. Он остается как import.

Но стабильный узел не поддерживает import строительство. Что я могу сделать в этой ситуации?

Нужно ли использовать эту схему: TypeScript-> ES6-> ES5 (через Babel)? Или есть другой метод?

Answer 1

Что я могу сделать в этой ситуации?

Вы можете указать TypeScript, какую систему модулей вы хотите использовать. От documentation:

Для компиляции мы должны указать цель модуля в командной строке. Для Node.js используйте --module commonjs; для require.js, используйте --module amd

tsc --module commonjs Test.ts 

Answer 2

обычно я использую эту конфигурацию ..

для машинописи transpiling мой 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" 
    ] 
} 

Мой Webpack DEV файл (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 используйте его для проекта Angular 2 .. надеемся, он вам поможет