[問題] jsoneditor in webpack

[brandyjohn (hailcpp)]

各位版大好, 小弟剛學寫網頁,

最近接觸webpack覺得非常方便,

但是又很容遇到設定上問題,(實在是又愛又恨)

這次遇到在使用jsoneditor 這個lib時遇到一些問題,

(

我用的lib是yarn安裝後, 根據github上的指示,

https://github.com/josdejong/jsoneditor#custom-builds

build 出 jsoneditor.custom.js後放在 node_modules底下的jsoneditor根目錄

這一動一直不確定對不對, 但是看到custom.js中有require(".src/xxxx")

就先這樣放了
)

請各位大大不吝指導.




目錄架構如下:

E:.
|   .gitignore
|   Jenkinsfile
|   package.json
|   webpack.config.js
|   webpack.config.prod.js
|   yarn.lock
|
+---app
|       config.js
|       configure.js
|       index.groovy
|       index.js
|       model.js
|       util.js
|
\---template
        index.html


configure.js (使用的地方)

import {JSONEditor} from '../node_modules/jsoneditor/jsoneditor.custom';

...

editor = new JSONEditor(container, options, JSON.parse(jq(paramId).val()));
             ^^^^^^^^^^
             之後有問題的地方


package.json

...

    "scripts": {
       "build": "webpack -p --progress --colors --profile "
    },
    "dependencies": {
        "bootstrap": "^3.3.7",
        "jquery": "^3.2.1",
        "jsoneditor": "^5.9.3",
        "select2": "^4.0.3"
    }
...


webpack.config.js

const path = require('path');
const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');
const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const extractCSS = new extractTextPlugin(path.resolve(__dirname, 'dist',
'[name].css'));
const htmlWebpackPlugin = require('html-webpack-plugin');

// the path(s) that should be cleaned
let pathsToClean = ['dist']

// the clean options to use
let cleanOptions = {
  verbose: true,
  dry: false
}

module.exports = {
  entry: {
    cfgbundle: './app/configure.js',
    cfgvendor: [
      'jsoneditor'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /.jsx?$/,
      include: [path.resolve(__dirname, 'app')],
      exclude: [
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, 'bower_components')
      ],
      loader: 'babel-loader',
      query: {
        presets: ['env']
      }
    }, {
      test: /\.css$/,
      use: [
        "style-loader", {
          loader: "css-loader"
        }
      ]
      // { test: /\.css$/, use: extractCSS.extract({fallback: 'style-loader',
use:
      // 'css-loader'})
    }, {
      test: /\.(jpg|png)$/,
      loader: 'file-loader'
    }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader"
    }]
  },
  resolve: {
    extensions: ['.json', '.js', '.jsx', '.css']
  },
  devtool: 'source-map',
  devServer: {
    contentBase: "dist/"
  },
  plugins: [
    new cleanWebpackPlugin(pathsToClean, cleanOptions),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack
    .optimize
    .CommonsChunkPlugin({
      name: "cfgvendor",
      minChunks: Infinity
    }),
    // extractCSS,
    new htmlWebpackPlugin({
      filename: 'index.html',
      template: './template/index.html'
    })
  ]
};

以上build完以後, deploy上去總是會產生

configure.js:62 Uncaught TypeError: n.JSONEditor is not a constructor
    at HTMLDocument.<anonymous> (configure.js:62)
    at d (jquery.js:3583)
    at c (jquery.js:3651)


實在不知道為什麼...

請各位大大解救我於水火之中...


--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 113.196.153.35
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1502102297.A.06B.html
→ freeccc: 我把jsoneditor npm install下來沒有看到
→ freeccc: ./node_modules/jsoneditor/jsoneditor.custom.js 耶
→ freeccc: 喔喔我漏看你最前面有自己 build 的部分，不好意思
→ freeccc: 如果改用 import JSONEditor from 'jsoneditor' 呢？
推 chatnoir: 我剛用樓上的寫法是可以的，原po是不是誤用{}？
→ brandyjohn: 我最後是用require來處理,我猜應該跟移除{}有一樣效果
推 dlikeayu: import