CODEWITHSUNDEEP
typescriptecmascript-6babeljs
Johansrk
Johansrk

Reputation: 5250

typescript + babel + es6

I am a bit confused what to do in the setup of my environement.

should I set my target to es6 in tsconfig, or is it the babel config that works. Also if I want to use promises, is it then still the same setup, and then I also add babel-polyfill ?

I want my code to run in IE. I use typescript 2 I use babel

.babelrc

{
    "presets": ["env"]
}

tsconfig

{
  "compilerOptions": {
    "target": "es6",
    "noImplicitAny": false,
    "typeRoots": ["./node_modules/@types/"]
  }
}

EDIT I ended removing babel and just using typescript and a polyfill. I use this polyfill https://www.npmjs.com/package/es6-promise-promise

for anyone interested here is my webpack setup. It runs typescript compiling and SCSS. 

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const chalk = require('chalk');
const SimpleProgressPlugin = require('webpack-simple-progress-plugin');


//*************PLUGINS***************All called in bottom of file***************************************/
// List of vendor JS libraries we want in a seperate vendor.js file
const VENDOR_LIBS = [ // this takes our vendor js files that we want in a seperate file
  "jquery",
  "lodash"
];

// Extract styles
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
  filename: 'styles.[contenthash].css'
});

// Clean our build folder
const CleanWebpackPlugin = require('clean-webpack-plugin');
const cleanConfig = new CleanWebpackPlugin(['build/*'], {
  root: '',
  verbose: true,
  dry: false,
  exclude: ['example.js']
})

// if we e.g. import jquery in our code, and also has it in our vendor.js file, remove them from our output bundle code, and only include it in vendor.js
const optimize = new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor'
});

const promisePolyfill = new webpack.ProvidePlugin({
  Promise: 'es6-promise-promise'
});

const html = new HtmlWebpackPlugin({ //Automaticly make index.html for us, and use our own index.html as a template. This means that it will only fill out what we didn't add. Fx our stylesheet and javascript files.
  template: './src/index.html'
});

const progress = new SimpleProgressPlugin(
  {
    messageTemplate: ['Thinking   :bar', chalk.bold.bgBlue.yellow(':elapsed sec'), ':msg'].join(' '),
    progressOptions: {
      complete: chalk.bgGreen(' '),
      incomplete: chalk.bgWhite(' '),
      width: 20,
      total: 100,
      clear: false
    }
  }
);


//*************WEBPACK CONFIG***************************************************************/
module.exports = {
  entry: {
    bundle: './src/index.ts', // Our whole codebase starts here. Our bundle will be called "bundle"
    vendor: VENDOR_LIBS // Our vendors, and output file will be named "vendor"
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js' // output bundle.js and vendor.js
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: ['ts-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: "css-loader", options: {
              sourceMap: true
            }
          }, {
            loader: "sass-loader", options: {
              sourceMap: true
            }
          }]
        })
      }
    ]
  },
  plugins: [ // Our plugin from the top, are called here
    progress,
    promisePolyfill,
    extractSass,
    cleanConfig,
    optimize,
    html
  ]
};

Upvotes: 1

Views: 848

Answers (1)

Daryl
Daryl

Reputation: 18895

Not sure why you would use both babel and Typescript... If you're wanting to use promises is a browser that doesn't support them OOB, then use a polyfill (I use the npm es6-promise) It has Type definitions so everything works smoothly in TypeScript.

Upvotes: 1

Related Questions