相关疑难解决方法(0)

使用Rollup,只需将format选项设置为,即可输出ES模块'es'.我怎么能用webpack做同样的事情？如果现在不可能,webpack是否有计划添加它？

我在文档中output.libraryTarget找到的唯一提到ES模块的是:

libraryTarget: "commonjs-module"- 使用module.exports对象(output.library被忽略)公开它,__esModule被定义(它在互操作模式下作为ES2015模块线程化)

但是,这对我来说还不太清楚.是否libraryTarget: "commonjs2"与__esModule定义的唯一差异相同？什么是"互操作模式"？

当我按照其他类似的报告时,无论我尝试安装(babel明智),都会继续收到此错误.这是堆栈跟踪:

error: bundling failed: Error: Requires Babel "^7.0.0-0", but was
loaded with "6.26.3". If you are sure you have a compatible version of
@babel/core, it is likely that something in your build process is
loading the wrong version. Inspect the stack trace of this error to
look for the first entry that doesn't mention "@babel/core" or
"babel-core" to see what is calling Babel. (While processing preset:
"C:\\Users\\Admin-ESS\\Absent\\node_modules\\@babel\\preset-env\\lib\\index.js")
    at throwVersionError (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:65:11)
    at Object.assertVersion (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:13:11)
    at _default (C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\lib\index.js:150:7)
    at C:\Users\Admin-ESS\Absent\node_modules\@babel\preset-env\node_modules\@babel\helper-plugin-utils\lib\index.js:19:12
    at C:\Users\Admin-ESS\Absent\node_modules\metro\node_modules\babel-core\lib\transformation\file\options\option-manager.js:317:46 …

Run Code Online (Sandbox Code Playgroud)

我有这样的目录结构:

和node_modules内:

 >node_modules
  >./bin
   >webpack.config.js
  >bootstrap
   >bootstrap.css
   >bootstrap.js

我需要像这样生成单独的CSS和JS包:

custom-styles.css,custom-js.js,style-libs.css,js-libs.js

where style-libs和js-libsshould应该包含所有库的syles和js文件,如bootstrap和jQuery.这是我到目前为止所做的:

webpack.config.js:

const path = require('path');
const basedir = path.join(__dirname, '../../client');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const stylesPath = path.join(__dirname, '../bootstrap/dist/css');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  watch: true,

  // Script to bundle using webpack
  entry: path.join(basedir, 'src', 'Client.js'),
  // Output directory and bundled file
  output: {
    path: path.join(basedir, 'dist'),
    filename: 'app.js'
  },
  // Configure module loaders (for JS ES6, JSX, etc.)
  module: {
    // Babel …

我想我已经阅读了 SO 上的每个线程以及互联网上的每个相关页面，所有内容都有一些问题的变体

我想：

• 使用 webpack 捆绑我的 Web 应用程序
• 在我的源 js 中使用 ES 模块并将它们转译为更广泛的浏览器支持
• 在我的 webpack 配置中使用 ES 模块

Node 14 据说支持 ESM，所以让我们使用它

设置1

我"type": "module"在我的package.json

然后我的webpack.config.js看起来像：

import { somethingUseful } from './src/js/useful-things.js';

export default (env, argv) => {
    return {
        // webpack config here
    };
}

运行> webpack（webpack-cli）我得到：

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\git\Useroo\webpack.config.js
require() of ES modules is not supported.
require() of webpack.config.js from C:\nvm\v14.14.0\node_modules\webpack-cli\lib\groups\resolveConfig.js is an …

CommonJS 导入const webpack = require('webpack');工作正常，但 ES6import webpack from 'webpack';没有。

来自Webpack 文档：

webpack 版本 2 原生支持 ES6 模块语法。

但它对我来说不是开箱即用的。

我也试过：

• 使用babel-loader的JS文件;
• 将“babel”添加到配置文件名称中。

但这一切都行不通。

包.json

"scripts": {
    "build:dev": "webpack --config webpack.config.dev.babel"
},
"devDependencies": {
    "babel-loader": "^7.1.4",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-merge": "^4.1.2"
}

webpack.config.common.babel.js

export const /* in this implied like default */ module = {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: '/node_modules/'
        }
    ],
};

webpack.config.dev.babel.js

import webpack from 'webpack';
import …

在下面的代码示例中,为什么注释行无法导入标记？我正在使用https://github.com/shama/es6-loader

module $ from 'jquery';
module React from 'react';

//import { marked } from 'marked';
var marked = require("marked");

这是一个示例存储库:https://github.com/justin808/react-tutorial-hot/tree/es6

此演示显示:1.Webpack和热重载2. React 3. ES6

我是一个相当大的ReactJS项目的新手。在顶层，它并没有具备平常webpack.config.js，但只有一个`webpack.config.babel.js'。我可以验证一下，这个确实可以使用了

> webpack

被调用（通过npm runNODE_ENV = development和WEBPACK_CONFIG =server_dev²，但这无关紧要）。

为什么？

a）如果我删除了babel-config，我将收到以下正当的投诉：

在当前目录中，配置文件可以命名为“ webpack.config.js”。

b）相反，如果我添加我自己要做的几乎没有的事情webpack.config.js，那确实是“规则”（webpack.config.babel.js不再使用）。

因此，很明显，webpack.config.js如果缺少此文件，则会启动一个“不可访问的”默认值。再说一遍，显然吗？此默认配置以某种方式迎合了webpack配置吗？通过什么方式？通过安装那些节点模块？

还是.babelrc将各种标记文件添加到webpack？

有趣的是，这个项目，preact-www项目具有相同的东西。（也不是原始的webpack配置，而是webpack的风格）。所以他们知道一些，我不知道...