Helpex - Trao đổi & giúp đỡ Đăng nhập
5

Đang cố gắng hỗ trợ IE 9 cho React. Nâng cấp lên sử dụng babel 6.3.26babel-preset-es2015babel-preset-reactcho Webpack. Tuy nhiên, khi tệp được tải trong IE 9, một lỗi cú pháp sẽ xảy ra.

webpack.config.js

/* eslint-env node */
var path = require('path');
var packageJson = require('./package.json');
var _ = require('lodash');
var webpack = require('webpack');

var context = process.env.NODE_ENV || 'development';

var configFunctions = {
    development: getDevConfig,
    production: getProdConfig,
    test: getTestConfig
};

var config = configFunctions[context]();

console.log('Building version %s in %s mode', packageJson.version, context);

module.exports = config;

function getLoaders() {
    if (context.indexOf('test') === -1) {
        return [
            {
                test: /\.js?$/,
                exclude: /(test|node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    } else {
        return [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    }
}

function getBaseConfig() {
    return {
        context: __dirname + "/src",
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'bundle.js',
            publicPath: '/static/'
        },
        stats: {
            colors: true,
            reasons: true
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        module: {
            loaders: _.union(
                getLoaders(),
                [
                    {
                        test: /\.scss$/,
                        loader: 'style!css!sass'
                    },
                    {
                        test: /\.eot$|\.svg$|\.woff$|\.ttf$/,
                        loader: 'url-loader?limit=30000&name=fonts/[name]-[hash:6].[ext]'
                    },
                    {
                        test: /\.(png|.jpe?g|gif)$/,
                        loader: 'url-loader?limit=5000&name=img/[name]-[hash:6].[ext]'
                    },
                    {
                        test: /\.mp4$/,
                        loader: 'url-loader?limit=5000&name=videos/[name]-[hash:6].[ext]'
                    }
                ]
            )
        }
    };

}

function getDevConfig() {
    return _.merge({}, getBaseConfig(), {
        devtool: 'cheap-module-eval-source-map',
        entry: [
            'babel-polyfill',
            'webpack-hot-middleware/client',
            './App'
        ],
        plugins: [
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin()
        ],
        eslint: {
            emitError: false,
            failOnError: false,
            failOnWarning: false,
            quiet: true
        }
    });
}

function getProdConfig() {
    return _.merge({}, getBaseConfig(), {
        devtool: 'source-map',
        entry: [
            'babel-polyfill',
            './App'
        ],
        plugins: [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                compress: {
                    warnings: false
                }
            })
        ],
        eslint: {
            emitError: true,
            failOnError: true
        }
    })
}

function getTestConfig() {
    return _.merge({}, getBaseConfig(), {})
}

Kiểm tra bundle.jscác dòng vi phạm cho thấy cách sử dụng constkhông phải là ES5. Am i thiếu cái gì ở đây? Tôi có cần chuyển mã ES6 thành ES5 để sử dụng trong sản xuất không?

5 hữu ích 0 bình luận 8.6k xem chia sẻ
3

IE9 không tương thích với ES6, vì vậy, có, bạn phải chuyển đổi mã ES6 của mình thành ES5. Tôi tin rằng vấn đề là bạn không bảo babel sử dụng reactes2015cài đặt trước. Tôi chắc chắn rằng bạn đã cài đặt chúng trên máy của mình, nhưng trình tải babel chỉ thực hiện những gì bạn nói với nó.

Bên trong getLoaders()chức năng của bạn , hãy thêm các giá trị đặt trước vào truy vấn cấu hình trình tải babel của bạn:

query: {
  plugins: ['transform-runtime'],
  presets: ['react', 'es2015']
}

Hy vọng rằng, điều đó làm việc cho bạn.

tham chiếu babel / babel-loader

3 hữu ích 4 bình luận chia sẻ
0

Tôi đang sử dụng create-react-app (v16.4.2). Tôi đã thử sử dụng các cách sau để có hello world mặc định hoạt động trong IE9:

1:

import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

2:

import "babel-polyfill";

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Nhưng cả hai đều không làm việc cho tôi. Tôi đã thêm dòng sau vào tệp index.html của mình trong thư mục công khai và nó đã khắc phục được sự cố của tôi:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Thông tin thêm có tại: https://polyfill.io/v2/docs/

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ reactjs internet-explorer-9 webpack babeljs , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading