Question

我有一个npm模块Picasso.with(context).load(url).into(new Target() { @Override public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) { Log.i(TAG, "The image was obtained correctly, now you can do your canvas operation!"); } @Override public void onBitmapFailed(Drawable errorDrawable) { Log.e(TAG, "The image was not obtained"); } @Override public void onPrepareLoad(Drawable placeHolderDrawable) { Log.(TAG, "Getting ready to get the image"); //Here you should place a loading gif in the ImageView to //while image is being obtained. } });，它提供了一些我想要供几个下游模块使用的对象。 my_lib是用ES6编写的，并使用babel进行转换。它位于私有github仓库中，可供下游模块的构建主机访问。消耗my_lib的下游模块能够像任何其他节点模块一样从my_lib导入符号，这一点非常重要。

我希望能够在任何下游模块中编写my_lib，并按import { libA, libB } from 'my_lib';的预期定义libA，假设下游模块的my_lib包括在内package.json条目dependencies

我在"my_lib": "orgname/reponame#branchname"下的my_lib package.json中有一个条目，如下所示：

scripts

其中"postinstall" : "npm run build", "build": "mkdir ./dist && browserify ./src/index.js -t babelify -t envify -o index.js",`是

./src/index.js

如果有必要，我可以从// Entry point for bundling export * as libB from "../sublib1/adapter"; export * as libA from "../sublib2/adapter";拨打import {libA, libB}，但这有点不受欢迎。主要是使我从my_lib/dist/bundle导出的所有名称都可用于下游模块。我可能对浏览器和babel发生了什么感到困惑。我非常乐意将postinstall / build挂钩更改为更方便的任何形式。

目前，在下游软件包（my_lib应用）中，express.js应用中import * as adapters from my_lib;行npm install完成且没有错误。我在express中看到了我期望的index.js文件。当我在node_modules/my_lib（或import之后）中断我的应用时，require对象存在，但adapters或libB都没有物体。它似乎是一个纯粹的vanilla JS对象，没有成员，只有libA。

Answer 1

通常在这种情况下我会使用babel并避免浏览器化。我在package.json中使用了类似的内容：

{
  "main": "dist/index.js",
  "scripts": {
    "postinstall": "babel src/ -d dist/"
  },
  "dependencies": {
    "babel-cli": "^6.9.0",
    "babel-preset-es2015": "^6.9.0"
  }
}

请注意，程序包的main入口点指向dist，而不指向src。这是为了使import my_lib和require('my_lib')（两者都运行良好）使用库的编译版本。

此外，这是与.babelrc并排的package.json文件的内容

{
  "presets": ["es2015"]
}

Answer 2

我一起使用babel和browserify。

我的package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
    "build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
    "build": "npm run build:scss & npm run build:js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.1",
    "exorcist": "^0.4.0",
    "node-sass": "^4.5.0",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }
}

package.json的实际版本：https://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d

为（私有）npm模块设置Babel / Browserify构建

2 个答案: