"Go" front-end engineering-dependencies and common workflows for public modules

Preface: A person's project, there are engineering problems?   We are sure to constantly precipitate the modules and components of our project in the process of advancing modularity and assembly. How are these precipitated modules and components managed? How else is dependency a problem? Do you really want to do this?  var BreadCrumb = require ('.. /.. /.. /.. /uikit/breadcrumb '); Really ugly.    also tried a lot of different solutions before, and finally found out that npm2.0 's local module is the simplest and most modular thinking, and we can divide our modules by function. For example: Uikit - breadcrumb.js - data-table.js - search-form.js ... util      -ajax.js     -pagenation.jsdialog.js...  so we build our own modules, and then we can separate the maintenance, commit to git separately, Then install it locally via the NPM install. And it solves the problem of dependence. For the above question, we can simply play this: var BreadCrumb = require (' uikit/breadcrumb '); //cool. As we expect in general   but through the process of multi-person coordination in our project, Uncomfortable place exposed, because our public modules are very few, we are constantly trying to extract, this will lead to our public module changes are relatively large, each time the change needs to remove node_modules under the local installation of Uikit, and then again NPM install  .... Once I endure, two times a sigh, three times four times, your sister ... Yes, I understand, we all have such good patience.   What about that?? We also want to follow the standard module approach, but also want to cool to solve the problem of the standard module dependency. The webpack shall not be sacrificed again. Really understand the heart of our developers, ah da!   Because of node's emergence, completely liberated the front-end productivity. The great gods began to build a wheel. For example, to build front-end warehouses in front-end, similar to MAVEN's warehouse, the more famous is Bower (Twitter), components (TJ great God). So in order to be compatible with these wheels, Webpack also made the appropriate adaptation. This adaptation can also be veryOK to solve the problem that I mentioned above that we want to solve.   The rest of it becomes unusually simple, and a configuration item is done.   module.exports in config file in webpack = {
Entry: './index.js ',
Output: {
Path: './build ',
FileName: ' Bundle.js '
}, Resolve: {modulesdirectories: [' ', ' uikit ', ' node_modules ']//Yes, Webpack provides parsing of multiple module catalogs, which solves the problem of local modules. }}; For example: ?  Web-moduleTree-l 2
.
├──build
│└──bundle.js
├──index.js
├──package.json
├──uikit
│├──index.js
│├──package.json
│└──utils.js
├──webpack.config.js
└──webpack.config.js~

2 directories, 8 files ?  Web-moduleMore Uikit/utils.js
var _ = Module.exports = {};

_.sayhello = function () {
Console.log (' 111say Hello world ... ');}; ?  Web-moduleMore Index.jsrequire (' uikit/utils '). SayHello (); Packaged, Webpack run ?  Web-moduleNode Build/bundle.js111say Hello world ...  This is the way you modify utils, you do not need to install the local. After we have successfully solved the problem of modularity dependencies, let's look at the workflow problem. When we are in the development environment, we need to constantly automatic monitoring packaging, and then before the launch of the write optimization such as compression and so on. So it was necessary to keep knocking at the command.  Development environment, Webpackwebpack-d--config Webpack.config.jswebpack-watchwebpack-d-config Webpack.config.js-watch on-line: webpack-p -config Webpack.production.js to knock out the above commands is also really a physical activity. Fortunately, NPM Run can customize some of the workflow for us. In the Package.json configuration, the corresponding parameters can be. {
"Name": "Web-module",
"Version": "1.0.0",
"description": "Web Module",
"Main": "Index.js",
"Scripts": {
"Build": "Webpack--config webpack.config.js-w",
"Release": "Webpack--config webpack.production.js",
"Start": "Webpack-dev-server--port--watch--process--color"
},
"keywords": [
"Web",
"Module"
],
"Author": "Hufeng",
"License": "ISC"
} Frank time: NPM Run build #开发npm Run Dist #正式环境打包 ? Web-moduleNPM Run Build

> [email protected] Build/users/bee1314/code/eggs/web-module
> Webpack--config webpack.config.js-w

hash:a2f467270792fdfe044c
Version:webpack 1.4.15
Time:77ms
Asset Size Chunks Chunk Names
Bundle.js 1709 0 [emitted] main
[0]./index.js {0} [built]
[1]./uikit/utils.js (0} [built] ? Web-moduleNPM start

> [email protected] Start/users/bee1314/code/eggs/web-module
> Webpack-dev-server--port--watch--process--color

http://localhost:3000/webpack-dev-server/
Webpack result is served from/
Content is served From/users/bee1314/code/eggs/web-module
hash:a2f467270792fdfe044c
Version:webpack 1.4.15
Time:90ms
Asset Size Chunks Chunk Names
Bundle.js 1709 0 [emitted] main
Chunk {0} bundle.js (main) 134 [rendered]
[0]./index.js {0} [built]
[1]./uikit/utils.js 0} [Built]webpack:bundle is now VALID.

"Go" front-end engineering-dependencies and common workflows for public modules