Question

我有一个项目，我正在使用webpack2和ES6与babel编译。但是我注意到来自underscore-template-loader的结果代码保留了ES6并且没有被转换。如何更新我的webpack.config.js以转换生成的模板结果？

我当前的webpack.config.js：

const path = require('path'); 
module.exports = {
    entry: 'app',
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: 'underscore-template-loader',
                query: {
                    engine: 'underscore',
                    prependFilenameComment: __dirname,
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        'es2015',
                        'es2016',
                        'es2017',
                        'stage-3',
                    ],
                },
            },
        ],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        sourceMapFilename: '[file].map',
    },
    resolve: {
        modules: [
            path.join(__dirname, 'src'),
            'node_modules',
        ],
    },
    devtool: 'source-map',
    plugins: [],
};

条目

中的示例箭头功能

_.forEach([1,2,3], (e) => {console.log(e);});

示例模板：

<% _.forEach(test, (e) => { %>
  <p>From template <%- e %></p>
<% }); %>

从结果：

_.forEach(test, (e) => {         // not transpiled :( 
__p+='\n  <p>From template '+
((__t=( e ))==null?'':_.escape(__t))+
'</p>\n';
 }); 

...

_underscore2.default.forEach([1, 2, 3], function (e) { // transpiled
  console.log(e);
});

在研究可能的解决方案时，我注意到有许多模板包也可能与下划线模板兼容。如果有使用不同且兼容的库的解决方案，我愿意切换。

Answer 1

您可以链接加载器

webpack 1

{ 
  test: /\.html$/, 
  loader: "babel?presets=[es2015]!underscore-template-loader?engine=underscore"
}

webpack 2

{
    test: /\.html$/,
    use: [
      {
           loader: 'underscore-template-loader',
            options: {
                engine: 'underscore',
                prependFilenameComment: __dirname,
            },
      },
      {
            loader: 'babel-loader',
            options: {
                presets: [
                    'es2015',
                    'es2016',
                    'es2017',
                    'stage-3',
                ],
            }
      }
    ]
  }

如何使用webpack和underscore-template-loader编译模板中的ES6

1 个答案: