如何像玩乐高™一样编程
食谱
享受
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
模块化是一大趋势，我并非第一个跟上这股潮流的人。今天，我将向你展示如何使用原生 JavaScript 和一些强大的工具轻松构建多模块应用程序。
食谱
原料
首先，我假设你事先知道一些事情：
- 面向对象编程
- 如何编写JS
- NPM基础知识
步骤
地面
让我们从创建一个空的项目目录（我们将其命名为“独角兽”）开始，并对其进行初始化。
npm init
index.js并使用传统的 JS 类创建主文件
function Unicorn(name) {
this.name = name;
}
Unicorn.prototype = {
shine: function() {
// All kind of good stuff here 🦄
}
}
var dazzle = new Unicorn("Dazzle");
dazzle.shine();
解耦
现在假设你想Unicorn在另一个项目中使用这个类，或者干脆把它开源给全人类。你可以创建一个新的目录和另一个仓库，但我们不妨更聪明一些。这个Unicorn类与 Unicorn 项目关联紧密，为了清晰起见，我们将使用 NPM 作用域的包名。
所有这些操作最终可以简化index.js为 3 行代码。
import Unicorn from "@unicorn/model";
var dazzle = new Unicorn("Dazzle");
dazzle.shine();
接下来，我们为模块创建一个子目录。
mkdir packages/model
cd packages/model
npm init # and name it @unicorn/model
其中也会有一个index.js带有该类的元素。既然我们保留了使用 import/export 语句的纯浏览器 JavaScript，为什么不使用简洁的 ES6 类语法呢？
export default class Unicorn {
constructor(name) {
this.name = name;
}
shine () {
// All kind of good stuff here 🦄
}
}
此时，该import语句针对的是应该安装在node_modules子目录下的软件包名称。我们可以使用相对路径，例如 `/etc/package/package/package` import Unicorn from "./packages/model/index.js";。更好的方法是在软件包之间创建链接。
幸运的是，npm 可以通过link 命令帮你完成这项工作。以下是我们示例中的实现方式。
cd packages/model
npm link
cd ..
npm link @unicorn/model
完美的 ！
包装
好吧，不错，但是现在我的浏览器用不了了，你个笨蛋！
首先，你是怎么联系我的？
是的，我知道，目前这些语法和功能都还处于实验阶段，不过有很多工具可以帮你处理。我喜欢用 webpack 和 babel，当然，这并不是唯一的解决方案。
在项目根目录添加一些软件包。
npm install --save-dev babel-loader babel-core babel-preset-env webpack
完整的 webpack 配置可以写成另一篇文章，所以我只展示一个可行的配置。新建一个名为 `webpack.conf` 的文件，webpack.config.js并在其中添加一些配置说明。
module.exports = {
entry: "./index.js", // Main file to read
module: {
rules: [{
test: /\.js$/, // For all file ending with ".js"
use: {
loader: "babel-loader", // Use babel
options: {
presets: ["babel-preset-env"],
},
},
}],
},
output: {
filename: "dist/unicorn.js", // Output the result in another file
library: "Unicorn", // Under "Unicorn" namespace
libraryTarget: "this",
libraryExport: "default",
},
};
然后，运行npx webpack它，它会将所有源代码构建成一个可供普通网页浏览器使用的文件。
管理
现在你可以创建很多子模块，并将它们全部封装在一个文件中。你甚至可以创建子子模块，以此类推。只需将它们全部放在同一个modules目录中即可。
随着项目规模的扩大，管理这些复杂的模块将会变得越来越困难。
这就是勒纳发挥作用的地方。
npm install -save-dev lerna
你可以把它想象成npm link打了兴奋剂的东西。
项目页面上有完整的文档，但这里先介绍几个常用命令。
npx lerna clean # Remove all node_modules directories
npx lerna bootstrap # Install remote dependencies and link local ones
npx lerna add package # Install a package to all sub-modules
npx lerna add package --scope=sub-module # Install a package to a specific sub-module
npx lerna publish # Bump, tag and publish all your modules over NPM
享受
你现在应该走在正确的道路上，能够写出最完美的项目了。我指望你了 ;)
如果您需要更深入的示例，我目前正在构建中
又一个JS绘图库使用了完全相同的技术。
下次，我们将讨论自动化测试，以及如何发现大量错误并确保长期一致性。
文章来源：https://dev.to/gmartigny/how-to-code-like-playing-lego--40fk