У меня есть конфигурация веб-пакета, основанная на https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js Он использует vue-loader и babel-loader. Проблема в том, что я не могу заставить его генерировать код ES5, чтобы он работал с самым широким кругом клиентов.
Если я использую предустановку ES2015, webpack.optimize.UglifyJsPlugin
не удастся минимизировать вывод, потому что Uglify может обрабатывать только ES5 (не считая ветви гармонии). Ошибки похожи на: Unexpected token: punc (()
и возникают в нескольких файлах.
Я могу обойти это, используя babili-webpack-plugin
, который минимизирует код ES6, но работает очень медленно. Однако, когда я развертываю этот код, я вижу, что в ответе об ошибках сообщается Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
, поэтому я знаю, что это старые клиенты, которые задыхаются от кода ES6.
Как я могу получить правильный вывод кода ES5 из babel-loader? Я пробовал несколько пресетов, с плагином transform-runtime
или без него. Конфигурация ниже:
const webpack = require('webpack');
const globEntries = require('webpack-glob-entries');
const _ = require('lodash');
const path = require('path');
const BabiliPlugin = require("babili-webpack-plugin");
const env = process.env.NODE_ENV;
let entries;
if (env === 'production') {
entries = globEntries('./src/**/vue/*.js');
} else {
entries = _.mapValues(globEntries('./src/**/vue/*.js'), entry => [entry, 'webpack-hot-middleware/client?reload=true']);
}
module.exports = {
entry: entries,
output: {
path: '/', ///no real path is required, just pass "/"
publicPath: '/vue',
filename: '[name].js',
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader',
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
},
// other vue-loader options go here
},
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['transform-runtime'],
},
},
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
},
},
],
},
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
},
},
plugins: [
new webpack.HotModuleReplacementPlugin(), // Enable HMR
new webpack.NoEmitOnErrorsPlugin(),
],
performance: {
hints: false,
},
devtool: '#eval-source-map',
};
if (env === 'staging' || env === 'production') {
//module.exports.devtool = env === 'staging' ? '#source-map' : false;
module.exports.devtool = '#source-map';
module.exports.output.path = path.resolve(__dirname, './src/v1/parse/cloud/public/vue');
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `"${env}"`,
},
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false,
},
}),
// new BabiliPlugin(),
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
]);
}
.babelrc
файл? (vue-loader
будетbabel-loader
использовать это.) Вы можете также использовать предустановкиes2016
иes2017
(илиenv
). - person bzeaman   schedule 13.08.2017.babelrc
, но я пробовал его. Насколько я понимаю, все, что можно установить в.babelrc
, можно вместо этого установить вoptions:
. Изначально я использовал предустановкуenv
, но по умолчанию он используетlatest
, и тогда я все еще не могу использовать Uglify или развернуть его в старых браузерах. Попытка указать envs, для которых требуется es2015, вернет меня в то же место. - person emkman   schedule 13.08.2017.babelrc
, но вы не предоставляете параметры при синтаксическом анализе.vue
файлов, посколькуvue-loader
будет использовать.babelrc
по умолчанию для своего Babel конфигурация. - person bzeaman   schedule 14.08.2017