@webpack_ru
Webpack — русскоговорящее сообщество

Обсуждения webpack, лоадеров, плагинов и сборок Правила: http://bit.ly/our_etiquette См. также: @rollup_ru, @react_js, @vscode_ru, @macos_ru, @js_ru

974 members

Архив канала @webpack_ru 25 марта 2017 г.

07:51:32 ДП
User 4627228
Всем привет. Вот что это за ?

require.ensure(['./maps'], function (require) {

TypeError: require.ensure is not a function
08:30:39 ДП
User 32530886
User 4627228
Всем привет. Вот что это за ?

require.ensure(['./maps'], function (require) {

TypeError: require.ensure is not a function
Во втором вебпаке этого нет. Юзай import ()
08:31:41 ДП
User 4627228
User 32530886
Во втором вебпаке этого нет. Юзай import ()
Так он приводит к require.ensure
08:31:50 ДП
User 32530886
User 4627228
Так он приводит к require.ensure
Нет
08:32:00 ДП
User 4627228
https://github.com/airbnb/babel-plugin-dynamic-import-webpack/blob/master/src/index.js
github.com/airbnb/babel-plugin-dynamic-import-webpack/blob/master/src/index.js
babel-plugin-dynamic-import-webpack - Babel plugin to transpile import() to require.ensure, for Webpack
08:33:02 ДП
User 32530886
User 4627228
https://github.com/airbnb/babel-plugin-dynamic-import-webpack/blob/master/src/index.js
github.com/airbnb/babel-plugin-dynamic-import-webpack/blob/master/src/index.js
babel-plugin-dynamic-import-webpack - Babel plugin to transpile import() to require.ensure, for Webpack
Это не то
08:33:27 ДП
User 32530886
Не надо транспилить бабелем модули во втором вебпаке
08:33:38 ДП
08:33:47 ДП
User 4627228
вот это чё-то не пишут нигде
08:33:52 ДП
User 32530886
Просто [es2015, {modules: false}]
08:35:09 ДП
08:35:21 ДП
User 4627228
в конфиге бабеля?
08:43:42 ДП
User 4627228
https://webpack.js.org/guides/code-splitting-import/
webpack.js.org/guides/code-splitting-import
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
08:43:47 ДП
User 4627228
вот здесь да
09:34:28 ДП
User 4627228
Запускаю как NODE_ENV=production npm run build

$ cat .babelrc
{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    "transform-decorators-legacy", "syntax-dynamic-import"
  ],
  "env": {
    "production": {
      "presets": ["react", ["es2015", { "loose": true, "modules": false }], "stage-0"],
      "plugins": [
        "transform-decorators-legacy", "syntax-dynamic-import"
      ]
    }
  }
}
09:35:12 ДП
User 4627228
выдаёт ту же самую ошибку
09:35:43 ДП
User 4627228
import('./maps').then(function (cmp) {
^^^^^^
SyntaxError: Unexpected token import
09:37:24 ДП
User 4627228
export default {
  devtool: false,
  context: path.join(__dirname, 'src'),
  entry: { ...CSS_ENTRIES, ...JS_ENTRIES },
  output: {
    path: path.join(__dirname, 'dist', 'assets'),
    publicPath: '/assets/',
    filename: `js/[name]-${build_hash}.js`,
  },
  plugins,
  resolve: {
    modules: [
      __dirname,
      'node_modules',
    ],
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
09:37:31 ДП
User 4627228
Вот что может быть не так?
10:19:48 ДП
User 4627228
Так, проблема не в сборке
10:19:50 ДП
User 4627228
А в запуске
10:19:53 ДП
User 4627228
require('babel-polyfill');
require('babel-core/register')({
  presets: ['react', ['es2015', { 'modules': false }], 'stage-0'],
  plugins: ["transform-decorators-legacy", 'syntax-dynamic-import'],
});
10:20:14 ДП
User 4627228
При такой инициализации
10:20:27 ДП
User 4627228
последующий require компонента выдаёт ошибку
10:21:56 ДП
User 4627228
User 4627228
import('./maps').then(function (cmp) {
^^^^^^
SyntaxError: Unexpected token import
вот эту
11:51:19 ДП
User 32530886
Вебпак какой версии
11:51:50 ДП
User 32530886
User 32530886
Просто [es2015, {modules: false}]
Это вместо "es2015" в presets в .babelrc
11:53:40 ДП
11:54:02 ДП
User 4627228
presets?)
11:54:27 ДП
User 4627228
User 4627228
Запускаю как NODE_ENV=production npm run build

$ cat .babelrc
{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    "transform-decorators-legacy", "syntax-dynamic-import"
  ],
  "env": {
    "production": {
      "presets": ["react", ["es2015", { "loose": true, "modules": false }], "stage-0"],
      "plugins": [
        "transform-decorators-legacy", "syntax-dynamic-import"
      ]
    }
  }
}
но вот оно уже тут
11:57:33 ДП
User 32530886
User 4627228
Запускаю как NODE_ENV=production npm run build

$ cat .babelrc
{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    "transform-decorators-legacy", "syntax-dynamic-import"
  ],
  "env": {
    "production": {
      "presets": ["react", ["es2015", { "loose": true, "modules": false }], "stage-0"],
      "plugins": [
        "transform-decorators-legacy", "syntax-dynamic-import"
      ]
    }
  }
}
Убери из корня пресетов es2015
11:57:48 ДП
User 32530886
Оставь только в production секции
11:58:34 ДП
User 4627228
Почему так надо?
11:59:25 ДП
User 32530886
Потому что из env добавляется к основным
11:59:43 ДП
User 4627228
Но у корневых приоритет?
12:00:16 ПП
User 32530886
Типа в env помещаешь специфичные вещи для окружения. А в корне основные
12:00:46 ПП
User 32530886
User 4627228
Но у корневых приоритет?
Ага
12:15:30 ПП
User 4627228
Чё-то ноль)
12:15:43 ПП
User 4627228
import('./maps').then(function (cmp) {
^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.
12:16:02 ПП
User 4627228
это выдаёт babel-register
12:16:15 ПП
User 4627228
User 4627228
require('babel-polyfill');
require('babel-core/register')({
  presets: ['react', ['es2015', { 'modules': false }], 'stage-0'],
  plugins: ["transform-decorators-legacy", 'syntax-dynamic-import'],
});
Который вот так вызван
12:18:44 ПП
User 32530886
User 4627228
это выдаёт babel-register
Ему не надо конфиг давать
12:19:10 ПП
User 32530886
Ты для бэкенда пишешь?
12:20:18 ПП
User 4627228
Ошибку нода выдаёт
12:20:25 ПП
User 4627228
Вообще изоморфно все
12:20:48 ПП
User 4627228
Но разумеется регистер вызывается сервер стартером
12:23:19 ПП
User 4627228
отключил параметры
12:23:25 ПП
User 4627228
но всё также
12:23:43 ПП
User 4627228
$ cat .babelrc
{
  "presets": ["react", "es2015", "stage-0"],
  "plugins": [
    "transform-decorators-legacy", "syntax-dynamic-import"
  ],
  "env": {
    "development": {
      "presets": ["react", "es2015", "stage-0"],
      "plugins": [
        ["transform-decorators-legacy", "syntax-dynamic-import"]
      ]
    },
    "production": {
      "presets": ["react", ["es2015", { "loose": true, "modules": false }], "stage-0"],
      "plugins": [
        "transform-decorators-legacy", "syntax-dynamic-import"
      ]
    }
  }
}
12:24:14 ПП
12:25:45 ПП
User 4627228
без es2015 вообще выдаёт

(function (exports, require, module, __filename, __dirname) { import path from 'path';
                                                                                                      ^^^^^^
SyntaxError: Unexpected token import
12:26:35 ПП
User 4627228
при запуске $ NODE_ENV=production node src/server-starter
12:27:06 ПП
User 4627228
$ cat src/server-starter.js
require('isomorphic-fetch');

// Setup babel environment
require('babel-polyfill');
require('babel-core/register')({
});

// ...
require('./server')
12:28:34 ПП
12:29:44 ПП
12:30:00 ПП
User 32530886
Тебе для ноды нужен другой плагин
12:30:14 ПП
User 4627228
какой?
12:30:25 ПП
User 4627228
чтобы асинк-авейт работал и вот это всё
12:30:31 ПП
User 32530886
https://www.npmjs.com/package/babel-plugin-import-node
npmjs.com/package/babel-plugin-import-node
Babel plugin to transpile import() to requireAsync()
12:30:45 ПП
User 32530886
Это для import() на стороне ноды
12:31:00 ПП
User 4627228
етить их колотить
12:42:00 ПП
User 4627228
Воу!!! Помогло! Серёг, ты крут :) с меня сертификат Касса Рамблер на любое кино, сейчас в личку напишу :)
05:10:16 ПП
User 185980313
User 32530886
Во втором вебпаке этого нет. Юзай import ()
не правда, есть