typescript + babel + es6

Question

我有點困惑在設置我的環境中該怎麼做。

我應該在tsconfig中將我的目標設置爲es6，還是使用babel配置？ 另外，如果我想使用承諾，它是否仍然是相同的設置，然後我還添加babel-polyfill？

我想讓我的代碼在IE中運行。 我用的打字稿2 我用巴貝爾

.babelrc

{ 
    "presets": ["env"] 
} 

tsconfig

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

編輯 我最終消除巴貝爾，只是使用打字稿和填充工具。我使用這個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

不知道你爲什麼會同時使用巴貝爾和打字稿...如果你想使用的承諾是不支持OOB，然後用填充工具（我用的是NPM es6-promise）瀏覽器它有Type definitions，所以在TypeScript中一切正常。