标签: babelify

到目前为止,我一直试图使用env预设失败.我浏览,其他人已经提出了这样的问题的git 这个,并采取了一些那似乎为别人工作的建议,但至今没有运气.

这是我正在使用的:

的package.json

"bundle": "browserify ./client/app.js -d -o ./public/o.js -t [ babelify --presets [ env ] ]",
"devDependencies": {
  "@babel/cli": "^7.0.0-beta.40",
  "@babel/preset-env": "^7.0.0-beta.40",
  "babel-core": "^6.26.0",
  "babelify": "^8.0.0"
...

这是错误:

Error: Couldn't find preset "env" relative to directory "/Users/user/Documents/git/ts/client" while parsing file: /Users/user/Documents/git/ts/client/app.js

我可能遗失的任何东西？

我的最终目标是在使用Browserify和Babel 7的项目中使用Yarn Workspaces.这是我遇到的问题的最小再现.基本上似乎在子文件夹中存在一个package.json文件(这是你使用Yarn Workspaces时所拥有的东西之一)会破坏我的Browserify构建,我无法弄清楚原因.

这是一个GitHub回购,只有最小的问题再现.

首先,安装依赖项(你可以使用yarn或npm,无所谓):

$ npm install

然后确认Browserify + Babel构建工作:

$ npm run build

> browserify-babelify-yarn-workspaces@1.0.0 build /home/user/projects/browserify-babelify-yarn-workspaces
> browserify a/index.js -t babelify --outfile bundle.js

好的,一切都很好!我的编译代码在bundle.js中.

现在让我们在a文件夹中创建一个虚拟的package.json :

$ echo "{}" > a/package.json

这不应该改变构建,对吗？错误:

$ npm run build

> browserify-babelify-yarn-workspaces@1.0.0 build /home/user/projects/browserify-babelify-yarn-workspaces
> browserify a/index.js -t babelify --outfile bundle.js


/home/user/projects/browserify-babelify-yarn-workspaces/a/index.js:1
import lib from "./lib.js";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! browserify-babelify-yarn-workspaces@1.0.0 …

有关问题的完整描述,请参阅https://github.com/gajus/babel-plugin-react-css-modules/issues/162.

Git repo = https://github.com/basher/react-no-webpack

这是一个简单的POC/scaffold,用于没有Webpack或Gulp的React UI lib ,但它必须支持CSS Modules + Sass.

• 我只是想尝试使用Babel + Browserify.
• 并直接从"package.json"执行NPM脚本.

我有一个导入CSS文件的示例窗口小部件组件,另一个导入Sass文件的窗口小部件组件.解析CSS + Sass文件的内容时会发生错误 - 例如,转换程序不理解"." 在类选择器中.

这是具体的错误:

$ npm run watch

> react-no-webpack@1.0.0 watch C:\...path-to-project-folder...\react-no-webpack
> watchify ./src/index.js -o ./build/bundle.js -t babelify -v


C:\...path-to-project-folder...\react-no-webpack\src\lib\components\WidgetCSS\WidgetCSS.css:1
.widget {
^
ParseError: Unexpected token

编辑/更新:

我做了一些调查,并在react-css-modules repo中问了一个问题= https://github.com/gajus/react-css-modules/issues/268

我有一个使用 React 构建的小型表单组件，我想将其制作成一个可嵌入的小部件以在其他页面上使用。我相信我听说 Babelify 可以帮助实现这一目标，但老实说，我对如何实现这一目标感到茫然。我使用 Babelify 创建了表单组件的 bundle.js，但是将它粘贴到一个空白的 HTML 页面上<script src='bundle.js'></script>并没有做任何事情。很明显，我要么误解了某些东西，要么只是......完全迷失了。

我正在使用 browserify 和 babelify 来转译 JS 文件。JS 文件require()是 中的组件node_modules，我也想对其进行转译。

根据babelify 的 GitHub 上的常见问题解答，为了实现这一点，我应该使用global和选项来指定还应该转译的ignore文件夹：node_modules

browserify().transform("babelify", {
  global: true,
  ignore: /\/node_modules\/(?!app\/)/
});

我browserify通过命令行使用，但不知道如何传递这些选项。我也对这些选项是否特定于browserifyor感到困惑babelify。

这是我正在运行的命令：

browserify -t [ babelify ] input.js > output.js

这是我的.babelrc

{
  "presets": [
    [ "@babel/preset-env",
      {
        "targets": "defaults, ie >= 11"
      }
    ]
  ],
  "plugins": [ "@babel/plugin-proposal-object-rest-spread" ]
}

尽管自述文件提到了它，但我在选项中找不到global任何记录。我尝试给它提供我想要转译的模块名称（流畅），但是得到了browserifybabelify--global-transformUnexpected object exported by …

我花了几天时间在互联网上搜索并寻找解决此问题的方法（请不要将其标记为重复！）。我正在尝试使用 ES6 导入：

import * as _ from 'underscore'         <--- works
const test = _.clone({'2':1});          <--- works

import Bulma from '@vizuaalog/bulmajs'; <--- fails

我的 gulp 任务无法在“从 bulmajs 导入”行编译；我得到了可怕的“ParseError：'import'和'export'可能只出现在'sourceType：module'中”:(

这是 gulp 任务：

browserify(./src/js/index.js', {debug: true})
        .transform(babelify.configure())
        .bundle().on('error', function (err) {
        console.log(err);                   <--- error thrown here 
    })
    .pipe(source('index.js')) // Readable Stream -> Stream Of Vinyl Files
    .pipe(buffer()) // Vinyl Files -> Buffered Vinyl Files
    .pipe(sourcemaps.init().on('error', function (e) {
        console.log(e);
    }))
    .pipe(uglify().on('error', function (e) {
        console.log('here')
        console.log(e);
    }))
    .pipe(rename({extname: '.min.js'}))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(./prod/js'));

我很想继续使用 …