Question

我想将我的Javascript应用程序转换为两个不同的Javascript文件：
第一个用于旧版浏览器
第二个用于现代浏览器
计划为现代移动浏览器提供较小的构建，同时仍支持较旧的旧桌面浏览器。

babel-cli 允许预设，因此我可以将其设置为“env”，但似乎没有办法在。 babelrc <之外设置目标浏览器。 / em>这意味着必须更改 .babelrc 文件。

Webpack 允许使用 babel-loader 来指定目标浏览器，但似乎没有办法在不同的浏览器目标上使用它两次ENV。

有没有办法简单地实现我的需要？

Answer 1

所以我自己找到了一种方法，不确定它是否是最优雅的解决方案，但它确实有效。该解决方案使用webpack-merge来拥有多个webpack配置。以下是测试项目文件（“npm run buildlegacy”和“npm run buildios”之后在此测试示例中执行繁重的工作：

的package.json：

{
  "name": "testbabel",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.js",
  "dependencies": {
    "webpack": "^3.11.0",
    "webpack-merge": "^4.1.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1"
  },
  "scripts": {
    "buildios": "webpack --config ./ios.config.js",
    "buildlegacy": "webpack --config ./legacy.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

base.config.js：

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        app:'./src/app.js'
    }
};

ios.config.js：

const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
    output: {
        path: __dirname + '/dist',
        filename: 'ios11.bundle.js',
      },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    "presets": [
                        ["env", 
                            {
                                "targets": {
                                "browsers": ["ios_saf 11"]
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }
});

legacy.config.js：

const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');

module.exports = merge(baseConfig, {
    output: {
        path: __dirname + '/dist',
        filename: 'legacy.bundle.js',
      },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    "presets": [
                        ["env", 
                            {
                                "targets": {
                                "browsers": ["> 1%", "last 2 versions", "ie 8"]
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }
});

使用Babel和Webpack生成多个输出

1 个答案: