代码之家  ›  专栏  ›  技术社区  ›  Bob

Webpack ES6模块与Typescript和Babel捆绑

  •  0
  • Bob  · 技术社区  · 9 年前

    我有一个简单的设置,我使用webpack流来使用web包。 我试图将我的typescript转换为javascript,并使用es6模块将所有模块捆绑到一个文件中。

    我的设置(我将.babelrc文件设置为es2015):

      return gulp.src('./app/index.ts')
        .pipe(webpack({
          resolve: {
            extensions: ['', '.ts', '.js']
          },
          module: {
            loaders: [
              { test: /\.ts$/, exclude: /node_modules/, loader: 'ts-loader' },
              { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
            ]
          },
          output: {
            filename: 'bundle.js'
          }
        }))
        .pipe(gulp.dest('./build));
    

    这个设置的结果只是将我的typescript转换为索引。ts并将导入保存在文件中。我的配置有什么问题?

    2 回复  |  直到 9 年前
        1
  •  0
  •   ermish    9 年前

    "babel": "^6.5.2", "babel-preset-es2015": "^6.9.0", "babel-loader": "^6.2.5"

    我相信您还需要指定要使用哪个预设,因此从以下内容更新babel loader:

    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }

    为此:

    { loader: 'babel', test: /\.js$/, exclude: /node_modules/, query: { presets: ['es2015'] } }

        2
  •  0
  •   Bob    9 年前

    解决了。装载机的配置应如下所示:

    loaders: [
      {
        loader: 'babel!ts',
        test: /\.ts$/,
        exclude: /node_modules/
      }
    ]
    

    这确保了babel在typescript之前运行。