Question

https://babeljs.io/docs/usage/polyfill/#usage-in-browser

我不明白文档页面下的行：

浏览器标题中的用法

有人可以帮助我解决其他问题：

以下是我的代码段：

我正在使用故事书作为样板：

webpack.config.js file:

entry: [
    'babel-polyfill',
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs
]

index.js file:

import 'babel-polyfill';
import React from 'react';

是否还有一些其他文件需要添加babel-polyfill相关代码。

require('babel-polyfill');
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
var getClientEnvironment = require('./env');
var paths = require('./paths');
var publicPath = '/';
var publicUrl = '';
var env = getClientEnvironment(publicUrl);
module.exports = {
    devtool: 'cheap-module-source-map',
    entry: ['babel-polyfill',
        require.resolve('react-dev-utils/webpackHotDevClient'),
        require.resolve('./polyfills'),
        paths.appIndexJs
    ],
    output: {
        path: paths.appBuild,
        pathinfo: true,
        filename: 'static/js/bundle.js',
        publicPath: publicPath
    },
    resolve: {
        fallback: paths.nodePaths,
        extensions: ['.js', '.json', '.jsx', ''],
        alias: {
            'react-native': 'react-native-web'
        }
    },
    module: {
        // First, run the linter.
        // It's important to do this before Babel processes the JS.
        preLoaders: [{
            test: /\.(js|jsx)$/,
            loader: 'eslint',
            include: paths.appSrc,
        }],
        loaders: [{
                exclude: [/\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/],
                loader: 'url',
                query: {
                    limit: 10000,
                    name: 'static/media/[name].[hash:8].[ext]'
                }
            },
            // Process JS with Babel.
            {
                test: /\.(js|jsx)$/,
                include: paths.appSrc,
                loader: 'babel',
                query: {
                    cacheDirectory: true
                }
            }, {
                test: /\.css$/,
                loader: 'style!css?importLoaders=1!postcss'
            }, {
                test: /\.json$/,
                loader: 'json'
            }
        ]
    },
    // We use PostCSS for autoprefixing only.
    postcss: function() {
        return [
            autoprefixer({
                browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway
                ]
            }),
        ];
    },
    plugins: [
        new InterpolateHtmlPlugin({
            PUBLIC_URL: publicUrl
        }),
        new HtmlWebpackPlugin({
            inject: true,
            template: paths.appHtml,
        }),
        new webpack.DefinePlugin(env),
        new webpack.HotModuleReplacementPlugin(),
        new CaseSensitivePathsPlugin(),
        new WatchMissingNodeModulesPlugin(paths.appNodeModules)
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};

Answer 1

有两种方法可以将此代码放入浏览器中。

1 - 将babel-polyfill模块包含在webpack包中

2 - 在html

中将其作为外部脚本加载

Webpack - 使用条目数组添加捆绑依赖项

将数组作为入口点，使babel-polyfill模块可用作捆绑包。

使用webpack.config.js，将babel-polyfill添加到您的条目数组中。

webpack文档解释了如何处理条目数组：

将数组传入条目时会发生什么？传递一个文件数组 entry属性的路径创建了所谓的＆＃34; multi-main 条目＆＃34 ;.当您想要注入多个时，这很有用依赖文件在一起并将其依赖关系映射为一个＆＃34;大块＆＃34;

Webpack.config.js

require("babel-polyfill");

var config = {
   devtool: 'cheap-module-eval-source-map',
   entry: {
    main: [
      // configuration for babel6
      ['babel-polyfill', './src/js/main.js']
    ]
  },
 }

替代Webpack - 在浏览器html中将babel-polyfill加载为外部脚本

使用webpack的替代方法意味着将模块作为html中的外部脚本包含在内。然后它可用于浏览器中的代码，但webpack包不会直接知道它。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.22.0/polyfill.js"></script>

即使在我的webpack中添加了babel-polyfill之后，仍然会出现'Symbol'未定义'错误

1 个答案: