Typescript + Webpack Encore + Foundation [IE 11上的语法错误]

时间:2018-07-02 13:21:42

标签: javascript typescript webpack zurb-foundation babeljs

我有很多小时了,但我找不到解决方法...

在我的Symfony 3项目中,我决定使用webpack-encore来管理我的资产。 我使用ES6 JS和Typescript在现代javascript代码中进行开发。然后,Babel将ES2015中的代码转换为所有浏览器都可以解释。 我也使用框架Foundation CSS。

我的第一个问题是语法错误,Chrome / Firefox / Edge上的一切都可以,但是在IE 11上我有很多错误....

enter image description here

  1. 第一个错误:错误语法
  2. 第二个错误:无法获得“呼叫” 空引用或未定义引用的属性
  3. 第三错误:对象 不处理属性或方法“每个”

错误语法来自仍然存在的“类”标记。 我不明白,因为代码应在ES2015中,因此不应有此标签...

enter image description here

我给您输入了基础导入的代码,也许我没有正确的方法:

import 'foundation-sites'
import { Foundation } from 'foundation-sites/js/foundation.core';

这也是我的webpack配置:

// webpack.config.js
const  Encore = require('@symfony/webpack-encore');
const webpack = require('webpack');
const  path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const ResponsiveSharp = require("responsive-loader/sharp");
const DashboardPlugin = require('webpack-dashboard/plugin');

Encore

// enable source maps during development
.enableSourceMaps(!Encore.isProduction())

// the project directory where all compiled assets will be stored
.setOutputPath('web/dist/')

// the public path used by the web server to access the previous directory
//Todo: In production remove web
.setPublicPath('/dist')
.setManifestKeyPrefix('dist')

.createSharedEntry('vendor', [
    './web/assets/ts/app.ts',

    //vendor.css
    './web/assets/fonts/foundation-icons/foundation-icons.css',
    './web/assets/scss/app.scss',
])


//Script
.addEntry('polyfill', ["babel-polyfill"])
.addEntry('home_page', ['./web/assets/ts/home_page.ts'])
.addEntry('common', ['./web/assets/ts/common.ts'])
.addEntry('essentiel_page', ['./web/assets/ts/essentiel_page.ts'])
.addEntry('essentiels_mosaic_page', ['./web/assets/ts/essentiels_mosaic_page.ts'])
.addEntry('creation_page', ['./web/assets/ts/creation_page.ts'])
.addEntry('creations_mosaic_page', ['./web/assets/ts/creations_mosaic_page.ts'])
.addEntry('creer_recette_page', ['./web/assets/ts/creer_recette_page.ts'])
.addEntry('favoris_page', ['./web/assets/ts/favoris_page.ts'])
.addEntry('login_page', ['./web/assets/ts/login_page.ts'])
.addEntry('test', ['./web/assets/ts/test.ts'])


//Style
.addStyleEntry('home_style',[
    './web/assets/scss/home.scss'
])
.addStyleEntry('common_style',[
    './web/assets/scss/common.scss'
])
.addStyleEntry('essentiels_style',[
    './web/assets/scss/essentiels.scss'
])
.addStyleEntry('creations_style',[
    './web/assets/scss/creations.scss'
])
.addStyleEntry('creer_recette_style',[
    './web/assets/scss/creer_recette.scss'
])
.addStyleEntry('custom_style',[
    './web/assets/scss/custom.scss'
])
.addStyleEntry('var_style',[
    './web/assets/scss/var.scss'
])
.addStyleEntry('login_style',[
    './web/assets/scss/login.scss'
])
.addStyleEntry('print_style',[
    './web/assets/scss/print.scss'
])


//Enable Typescri^t
.enableTypeScriptLoader(function (typeScriptConfigOptions) {
    typeScriptConfigOptions.transpileOnly = true;
    typeScriptConfigOptions.configFile = 'tsconfig.json';
})

// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()

// empty the outputPath dir before each dist
.cleanupOutputBeforeBuild()

// show OS notifications when dists finish/fail
.enableBuildNotifications()

// allow sass/scss files to be processed
 .enableSassLoader(function(sassOptions) {}, {
         resolveUrlLoader: false
 })
.enablePostCssLoader()
.enableVersioning(Encore.isProduction())//Todo : Correct bug


 /*** Uglify accept ES6 ****/
 const webpackConfig = Encore.getWebpackConfig();

 /******************************/

// Remove the old version first
webpackConfig.plugins = webpackConfig.plugins.filter(
    plugin => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);

// Add the new one
webpackConfig.plugins.push(new UglifyJsPlugin({
/*    sourceMap: true*/
}));
/*********************/


/** Watch options **/
webpackConfig.watchOptions = { ignored: [/node_modules/] };
/*******************/

global.$ = global.jQuery = require('jquery');

// export the final configuration
module.exports = webpackConfig;

还有我的.babelrc:

{
  "presets": [
    ["env", {
/*      "modules": false,*/
      "targets": {
        "browsers": ["last 2 versions", "ie >= 10"]
      },
      "useBuiltIns": true,
      "debug": false,
      "sourceMaps": true
    }]
  ],
  "plugins": ["transform-runtime", "add-module-exports", "transform-property- 
literals", "transform-member-expression-literals", "syntax-class- 
properties","transform-class-properties","transform-es2015-template- 
literals"]
}

我看到了类似的问题:link,但就我而言始终无法解决。

预先感谢您的举办,我非常需要-_-

0 个答案:

没有答案