打字稿 + 通天塔 + es6

Question

在我的环境设置中我有点困惑。

我应该在 tsconfig 中将目标设置为 es6，还是 babel 配置有效。 另外，如果我想使用 Promise，是否仍然是相同的设置，然后我还要添加 babel-polyfill ？

我希望我的代码在 IE 中运行。 我使用打字稿2 我用通天塔

.babelrc

{
    "presets": ["env"]
}

tsconfig

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

编辑 我结束了删除 babel 并仅使用 typescript 和 polyfill。我用这个 polyfill https://www.npmjs.com/package/es6-promise-promise

对这里感兴趣的人来说，我的 webpack 设置。 它运行打字稿编译和 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
  ]
};

Answer 1

不知道为什么你会同时使用 babel 和 Typescript... Type definitions 所以在 TypeScript 中一切都很顺利。