个人第一个 package

时间 2019-12-10

标签个人第一个 package 繁體版

原文原文链接

问，制做一个 package，总共须要几步？答：三步。html

1.起一个包名字
2.制做一个包
3.告诉你们

前言

是的，这是一个孔子看了想打人，诸葛看了要骂街的答案。正经一点儿说，制做一个包里面的细节仍是很多的。要求一个做者对 JavaScript 模块化有基本的认识，不仅是像我同样只熟悉 AMD, CMD, commonJS 的拼写。最起码要知道它们之间的区别和使用场景。其中，commonJS 是 node 服务端使用的，在浏览器中并不支持，前端可能会陌生。咱们简单区分一下：module.exports/require 和 export/import 分别是 node 和 ES 6 使用的规范。前端

起个名字

要制做一个 package 是要从 npm init 开始的。输入这个命令后，会有一个交互式的问答操做，生成一份简单的 package.json，里面包含一些基本信息。而后，须要注册一个npm帐号，使用 npm login 来执行登录操做。起名字是个简单而又愉快的过程，接下来的制做，可就要花点心思了。node

如何制做

1.目录结构

dist
doc
src
test

package 目录的结构大体如此，按照需求来区分。咱们须要一个用来编写 package 的源码目录 src。须要一个打包生成的目录，供其余人调用 dist，注意，这个dist的目录也要在根目录的 package.json 中设置 main.js 属性。须要一个目录来管理文档说明，指引其余人如何使用，这就是 doc 目录，这个目录其实是一个独立的子 package，它包含本身独立的 webpack.config.js，由于它通过 webpack 打包生成的文档包含 html 文件，不仅是一个供用户 import 的 package。react

2.webpack 配置

talk is cheap, show me your code. 说话是便宜的，看我你的代码。（这个直译辣不辣眼镜）。接下来，打算在下面的实际配置中经过具体添加注释来讲明webpack

module.exports = {
  // 必定要使用 production 的配置项，由于这个包生成的文件是给其余用户使用的，production 提供了基本的压缩优化功能，以及其余一些不一样的默认设置。
  "mode": "production",
  // 就是咱们的源码目录没什么多说的
  "entry": "./src/index.js",
  // 这里须要自定义
  "output": {
    "path": __dirname + '/dist',
    "filename": "[name].js",
    // 这里推荐使用 umd，毕竟考虑用户会用 require 和 import 两种方式导入咱们的包
    "libraryTarget": "umd"
  },
  "module": {
    // 惯例配置，无需多言
    "rules": [
      {
        "test": /\.(js|jsx)$/,
        "exclude": /node_modules/,
        "use": {
          "loader": "babel-loader",
        }
      }
    ]
  },
  externals: {
    // 这里要格外注意，个人这个包基于 react 组件开发。这里不须要包 react 打包进去，一个是由于体积，另外用户必定要有 react 环境才能正常使用咱们的包。
    'react': "react"
  }

}
复制代码

3.文档编写

前面提到文档编写的包实际上是一个独立的 package，这里也把配置代码贴了出来。主要不一样在于有 devsever 和 htmlWebpackPlugin。git

var path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: "./src/index.js",
  output: {
    filename: "index-bundle.js"
  },
  "module": {
    "rules": [
      {
        "test": /\.(js|jsx)$/,
        "exclude": /node_modules/,
        "use": {
          "loader": "babel-loader",
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    //module: false
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "doc.html",
      template: "./src/index.html"
    })
  ]
};

复制代码

4.gitignore 和 .npmignore 等其余设置

Keeping files out of your package

Use a .npmignore file to keep stuff out of your package. If there’s no .npmignore file, but there is a .gitignore file, then npm will ignore the stuff matched by the .gitignore file. If you want to include something that is excluded by your .gitignore file, you can create an empty .npmignore file to override it. Like git, npm looks for .npmignore and .gitignore files in all subdirectories of your package, not only the root directory.web

咱们能够经过上述文档知道一件事， npmignore 比 gitignore 的优先级高。npm

5.（误）其余重要的事

持续集成是开发一个包所必备的，由于我尚未具体实践，这里就挖坑不表了。json

参考资料

前端模块化：CommonJS,AMD,CMD,ES6