This question has already been answered:

Writing many lines of code in one file is inconvenient at all. I read about different systems of modules, but they all can not work without any third-party libraries, server, collector or something else. ES6 modules are not supported in browsers yet .

If I want to write an application \ site \ page \ script \ etc and split the code into parts, then I can’t do without a server, third-party libraries that need more libraries, a project collector and other things?

I tried Browserify , but I need to run the build each time, or use gulp \ grunt for the same. Inconvenient.

Require.js does not require assembly, but I don’t like the code organization:

require(['deps/dep1', 'deps/dep2', 'deps/dep3', 'deps/dep4', 'deps/dep5', 'deps/dep6', 'deps/dep7'], function ( dep1, dep2, dep3, dep4, dep5, dep6, dep7) { return function () { return dep1 + dep2; }; });

How to implement a modular system in the most efficient way, without burdening yourself with unnecessary libraries?

Reported as a duplicate by participants Duck Learns to Hide , Darth , Sasha Omelchenko , Qwertiy ♦ , aleksandr barakin Jun 5 '17 at 22:33 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • It seems to be a good idea to use es6 modules, when developing to use a browser that supports es6 modules, and for production to convert es6 modules to one of the many formats supported by browsers. - diraria
  • one
    @ Dmitry, good idea, thanks. - user7103883
  • for browserify / gulp / grunt / webpack, there are watchers who themselves restart the build and rebuild accordingly what has changed and not everything - Duck Learns to Hide

1 answer 1

Now there is almost no browser support. Therefore, ES modules are used in conjunction with build systems, such as webpack , brunch and others, with Babel.JS connected. Here is webpack.config.js

 // Для использования нужен Node.JS // Поставьте webpack: // npm i -g webpack // Поставьте babel-loader: // npm i babel-loader // Запустите его в директории с файлами: // webpack module.exports = { entry: "./index.js", output: { filename: "./build.js" }, watch: true, // просмотр включен watchOptions: { aggregateTimeout: 100 //время тайм аута просмотра изменений }, plugins: [ ], devtool: 'source-map', module: { loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015'] }, } ] }, };

here are more modules

  • You have the configuration of the first webpack (for example, in the second one you cannot omit the full name of the bootloader), and with npm i webpack, the second one is currently installed. Accordingly, if you follow your answer from scratch it seems to be an error. - Duck Learns to Take Cover
  • one
    apologize here config from second one - bad4iz
  • if something is not clear , I 'll sign for more - bad4iz