在 Babel 7 中包含一些 node_modules 目录

Posted 2023-02-21

【中文标题】在 Babel 7 中包含一些 node_modules 目录

【英文标题】：Include some node_modules directories in Babel 7

【发布时间】：2019-11-24 10:41:27

【问题描述】：

我在node_modules 中有一个依赖项，需要通过 Babel 编译。升级堆栈后，我无法让 Babel 重新编译。

当前版本：

@babel/core 7.5.4 webpack 2.7.0

webpack.config.js：

const path = require('path');

module.exports = 
    devtool: 'cheap-module-source-map',
    context: path.resolve('resources/assets/js/'),
    entry: ['./index'],
    output: 
        path: path.resolve('public/js'),
        filename: 'index.js'
    ,
    module: 
        rules: [
            
                include: [
                    path.resolve('resources/assets/js/'),
                    path.resolve('node_modules/mydep/'),
                ],
                exclude: /node_modules\/(?!mydep).+/,
                test: /\.js|jsx$/,
                use:  loader: 'babel-loader' 
            
        ]
    ,
    resolve: 
        modules: [
            path.resolve('./resources/assets/js/'),
            'node_modules'
        ]
    ,
    watchOptions: 
        aggregateTimeout: 300,
        ignored: [
            /node_modules([\\]+|\/)+(?!mydep)/,
            /\mydep([\\]+|\/)node_modules/
        ]
    
;

.babelrc:

  "presets": [
    ["@babel/preset-env", 
      "debug": true,
      "useBuiltIns": "usage"
    ],
    "@babel/preset-react"
  ]

我在第一个 JSX 标记顶部得到的错误：

ERROR in /var/www/node_modules/mydep/somedir/app/index.js
Module build failed (from /var/www/node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/node_modules/mydep/somedir/app/index.js: Unexpected token (160:15)

  158 |         registerReducers();
  159 |         new SomeClass('acquisition');
> 160 |         return <SomeComponent />

【参考方案1】：

我认为这与构建 js-code 的理念相矛盾。

node_modules 中的所有包都必须已经构建，因为除了包的作者，没有人不知道如何构建这个包。

如果 mydep 是你的包，我建议在发布到 npm 之前构建它。否则，您可以分叉它或构建安装后脚本。

【讨论】：

我在以前的版本中是可能的，基本上我想以与我当前代码相同的方式构建它。这是我在项目之间分解代码的一种方式，安装后脚本基本上会减慢我的构建过程。

你可以在你的 npm 包上使用 prepublish 脚本。第二种解决方案是通过符号链接将你的 npm 包添加到你的主项目中。但是如果你有很多自己的包，你可以探索单一存储库的解决方案。例如，rushjs.io

您认为 TypeScript 代码不编译成 javascript 就无法使用。这并不总是正确的。许多编译和执行环境可以直接使用 TypeScript 代码。

【参考方案2】：

我终于搞定了。

package.json

  "name": "someproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "browserslist": "> 0.25% in DE, not dead",
  "directories": 
    "test": "tests"
  ,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 0"
  ,
  "private": true,
  "dependencies": 
    "@babel/core": "^7.5.4",
    "@babel/plugin-proposal-class-properties": "^7.5.0",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "browserify": "^16.2.0",
    "core-js": "^3.1.4",
    "minify": "^3.0.5",
    "somedeps": "ssh://[e-mail]:somedeps.git",
    "regenerator-runtime": "^0.13.2",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  

webpack.config.js

const path = require('path');


module.exports = 
    devtool: 'cheap-module-source-map',
    context: path.resolve('resources/assets/js/'),
    entry: ['./index'],
    output: 
        path: path.resolve('public/js'),
        filename: 'index.js'
    ,
    module: 
        rules: [
            
                test: /\.js|jsx$/,
                use: 
                    loader: 'babel-loader',
                    options: 
                        presets: [
                            ["@babel/preset-env", 
                                useBuiltIns: 'entry',
                                corejs: 3
                            ],
                            "@babel/preset-react"
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties",
                        ],
                        include: [
                            path.resolve('resources/assets/js/'),
                            path.resolve('node_modules/somedeps/'),
                        ],
                        exclude: /node_modules\/(?!somedeps).+/
                    
                
            
        ]
    ,
    resolve: 
        modules: [
            path.resolve('./resources/assets/js/'),
            'node_modules'
        ]
    ,
    watchOptions: 
        aggregateTimeout: 300,
        ignored: [
            /node_modules([\\]+|\/)+(?!somedeps)/,
            /\somedeps([\\]+|\/)node_modules/
        ]
    
;

在你的应用主文件的顶部，这里是 resources/assets/js/index.js，包括：

require('core-js');
require('regenerator-runtime/runtime');