Question

我对环境的设置有点困惑。

我应该在tsconfig中将目标设置为es6，还是可以运行的babel配置？另外，如果我想使用promises，那么它仍然是相同的设置，然后我还添加了babel-polyfill？

我希望我的代码能够在IE中运行。我使用的是typescript 2 我用巴贝尔

.babelrc

{
    "presets": ["env"]
}

tsconfig

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

EDIT 我结束了删除babel，只使用打字稿和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 ......如果您想要使用promises是一个不支持OOB的浏览器，那么请使用polyfill（我使用npm {{ 3}}）它有es6-promise所以一切都在TypeScript中顺利运行。

打字稿+巴贝尔+ es6

1 个答案: