创建NPM包

我们以cnpm创建一个lang为例, 并以webpack build的项目作为检验工具

创建目录

$ mkdir lang && cd lang

初始化npm包

$ cnpm init

依次按提示填完后生成一个package.json

{
  "name": "@cjt/lang",
  "version": "0.1.0",
  "description": "常用函数工具库",
  "main": "src/lang.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "lang"
  ],
  "author": "guopeng",
  "license": "ISC"
}

添加src目录并在其下创建lang.js.

lang.js

/**
 * Created with WebStorm.
 * User: gp
 * Date: 16-2-19
 *
 */

const lang = {
    byId: (id) => document.getElementById(id)
}

export default lang;

发布包

完成以上的操作我们就可以发布包了

$ cnpm publish

发布完成后，我们在实际项目中作下验证：

1. 安装包 $ cnpm install @cjt/lang --save
2. 在代码中引入 import lang from '@cjt/lang';
3. 调用方法： lang.byId('app')

启动项目。

这时会提示错误：

为什么为解析失败？ 是因为我们npm包中使用了ES6的语法，而在我本地的项目webpack配置中并没有对第三方的npm包进行ES5转码。

loaders:[
                {
                    test: /\.js$/,
                    loader: 'babel',
                    exclude: path.join(__dirname,'/node_modules/'),
                    query:
                    {
                        presets:['react']
                    }
                }
        ]

我们提供的npm包不能期望每个使用者在调用时自己作转码。所以我们提供给用户的应该是一个已编译过的npm包。

编译npm ES6代码

我们使用babel来转码

修改package.json

  "main": "lib/lang.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "babel -d lib/ src/",
    "prepublish": "npm run compile"
  },
  "devDependencies": {
    "babel-cli": "^6.3.17",
    "babel-preset-es2015": "^6.0.0"
  },

添加.babelrc文件

{
    "presets": ["es2015"]
}

安装依赖、重新发布

$ cnpm install

$ cnpm publish

再启动项目我们看到已可以成功启动并正常运行。

package.json修改说明

• "main": "src/lang.js",改为"main": "lib/lang.js", src是我们源代码目录，lib是编译后生成的目录。
• "compile": "babel -d lib/ src/", 在scripts中添加了babel编译指令
• "prepublish": "npm run compile",prepublish指令会在每次publish之前执行

选择文件发布

有时我们发布时可能会不想发布文件目录中某些文件如：src，只需添加一个 .npmigonre文件，将不想发布的文件配置进去

.idea

src

.babelrc

webpack.config.js

.npmignore