标签: babel-loader

我有一个使用纱线工作区的 monorepo，其中有 2 个 Next.js 项目。

apps\n \xe2\x94\xa3 app-1\n \xe2\x94\x97 app-2\n

app-1需要从 导入组件app-2。为此，我将app-2项目添加为依赖项，并在 tsconfig 中设置路径，app-1如下所示：

app-1 package.json\n{\n  "name": "@apps/app-1",\n  "version": "0.1.0",\n  "private": true,\n  "dependencies": {\n    "@apps/app-2": "workspace:*",\n  }\n}\n

app-1 tsconfig.json\n\n{\n  "compilerOptions": {\n    "baseUrl": "./src",\n    "paths": {\n      "@apps/app-2/*": ["../../app-2/src/*"],\n      "@apps/app-2": ["../../app-2/src"]\n    }\n  }\n}\n

这工作得很好，但是，当组件导入app-2其他组件（例如import Component from "components/Component".

app-1components/Components不知道如何解决它，并正在其自己的文件夹中查找src不存在的文件夹。如果像这样导入相同的组件，import Component from ../../Component它将正确解析。为了解决这个问题，我在 的app-1tsconfig 文件中设置了另一个路径来手动解析。现在我的 tsconfig 看起来像

我正在运行一个庞大的项目，其中有数千个.js文件是用 编写的es5，出于多种原因和好处TS，我们决定开始迁移到TS，经过几天的研究和许多研究，我将详细阐述一个几点：

要开始从 迁移es5到 ，ts我们可以通过两种方式开始：

第一种方式：

1-安装ts、创建tsconfig并allowJS设置为 true，然后开始将文件扩展名更改为.ts，默认情况下一切都会正常工作

2-由于我们想要逐渐迁移，所以我们不想立即将全局脚本替换为本机模块，换句话说，我们不想立即键入importand export，而是希望保留旧的方式global scripts并使用/// <reference path="">to加载依赖项

3-在上一步之后我们可以逐渐开始将文件转换为本机模块esm

第二种方式：

1-正如我所读到的有关UMD 的内容，它将在 borwser（客户端）和服务器上工作，这意味着支持所有类型的模块AMD, CommonJS, SystemJS and Native ES modules

2-在时尚中重写脚本后UMD，我们可以逐渐开始将脚本移动到ESM

最后但并非最不重要的一点是，关于情报，我们将开始.d.ts相应地编写文件，或者我们可以依靠它ts-loader来生成文件

最后，我们要么选择ts-loader要么babel，但我们不确定每个选项是否都有一些限制

任何有关开始迁移的最佳方式的想法都值得赞赏

我有一个应用程序模块和几个模块共享的通用模块。

- app
  - src
  - package.json
  - webpack.config.json
  - .babelrc
- common
  - lib
  - package.json
  - .babelrc

app / package.json

dependencies: {
  common: "../common"
},
devDependencies: {
  ...othe deps,
  "babel-plugin-transform-object-rest-spread": "^6.23.0",
}

common / package.json

devDependencies: {
  ..other deps,
  "babel-plugin-transform-object-rest-spread": "^6.23.0",
}

通用代码在es6中，需要在应用中进行编译，因此webpack.config.js包含

{
  test: /\.js/,
  exclude: /node_modules\/(?!(ui-common|ui-server-common)\/).*/,
  loader: 'babel-loader',
},

如果我在通用模块中然后在应用程序模块中运行yarn install，则一切正常。它复制了通用模块的完整node_modules，因此它包含所有开发部门，包括babel-plugin-transform-object-rest-spread。

如果我从通用模块中删除node_modules，运行yarn install app模块，则仅复制prod依赖项，而app / node_modules / common / node_modules中缺少babel-plugin-transform-object-rest-spread。然后我得到

Module build failed: ReferenceError: Unknown plugin "transform-object-
rest-spread" specified in "/Users/blaf/projects/management-
ui/ui-common/.babelrc" at 0, attempted to …

从vuejs中的同一文件夹加载vue组件时出现错误，我已正确导入。但是在构建时，它显示以下错误。

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/table.vue.

Module not found: Error: Can't resolve 'features' in '/home/deploy/workspace/4url/static/shortening_url/src/components'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/table.vue 67:0-32
 @ ./src/components/table.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js

在我的React项目中，一切都可以在vmware上正常运行。但是当我克隆相同的应用程序并运行gulp命令时，在编译过程中出现此错误：

   MacBook-Pro:Frontend1.0 apurvgandhwani$ gulp
[18:42:31] Failed to load external module @babel/register
[18:42:31] Requiring external module babel-register
[18:42:32] Using gulpfile ~/Frontend1.0/gulpfile.babel.js
[18:42:32] Starting 'build:watch'...
[18:42:32] Starting 'copy:assets'...
[18:42:32] Starting 'copy:vendors'...
  Cleaned build/ 
  Copied 12 asset entries.
[18:42:32] Finished 'copy:vendors' after 329 ms
[18:42:32] Starting 'copy:views'...
[18:42:32] copied views all files 19.75 kB
[18:42:32] Finished 'copy:views' after 77 ms
[18:42:32] Starting 'copy:public'...
[18:42:33] Finished 'copy:public' after 132 ms
[18:42:33] Finished 'copy:assets' after 540 ms
[18:42:33] Starting 'bundle:dll'...
DLL Bundled.
Hash: 45f26d608c690be6e6c5
Version: …

我遇到了Webpack和Babel的问题.我正在尝试将我的JavaScript代码转换为捆绑文件.这是文件结构和片段:

文件结构:

- src
| file.js
package.json
webpack.config.js

的package.json:

{
  "name": "babel-webpack-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            { …

我有一个使用Inversify的打字稿Vue SPA项目。

我使用了awesome-typescript-loader来编译我的打字稿源代码。现在我想切换到Babel，但是当我编译我的应用程序webpack时会出现以下错误：

模块解析失败：意外字符'@'（38:25）您可能需要
适当的加载程序来处理此文件类型。
| _inherits（ReportService，_BaseService）;
| >函数ReportService（@inject（TYPES.Urls）
|网址）{
| var _this;
@ ./app/Ioc/container.ts 6：0-54 14：39-52
@ ./app/startup.ts

.babelrc

{
    "presets": [
        "@babel/env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "test/*": [ "test/*" ],
      "@/*": [ "app/*" ]
    },
    "lib": [ "es6", "dom" ], // es6 minimum required for Promise
    "target": "es6", // Required for vuetify
    "strict": …

我的代码有问题。我正在尝试将belbel-loader添加到我的laravel-mix webpack的配置中，但是我收到一条错误消息，告诉我this.setDynamic不是一个函数。

这是我的webapack-mix.js文件

const {mix} = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.webpackConfig({
    module: {
        rules: [
            // We're registering the TypeScript loader here. It should only
            // apply when we're dealing …

我有下面的结构及其编译良好。

• 项目
  • 动物园
    • Src
    • 组件
      • MySharedComponents

当我尝试将共享组件作为一个项目移动并尝试将其安装在其他项目中时，如下所示。这给出了编译语法错误。

• 功能（我的共享组件项目）
  • Src
    • 组件
      • MySharedComponents
• 项目
  • node_modules
    • 特征
  • 动物园
    • Src
    • 组件

GIT回购：https : //github.com/andiappan-ar/babelIssue.git

我使用以下命令安装了共享项目

> npm install --save ../../feature

我的Zoo Project server.webpack.config.js在下面

const path = require('path');
const env = require('@babel/preset-env');
const reactApp = require('babel-preset-react-app');
// Webpack build configuration to build the SSR bundle.
// Invoked by build:server.

module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, './server.js'),
  target: 'node',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: '../build/server.bundle.js',
    libraryTarget: 'this',
  },
  optimization: {
    minimize: false, …

我试图弄清楚如何从编译过程中提取一些信息。babel

更具体地说，当我运行时babel（无论是否使用Webpack的babel-loader，测试框架的转换器，Babel的CLI等），我都需要为每个编译文件提取一些信息。喜欢：