[問題] jsoneditor in webpack

看板Ajax作者brandyjohn (hailcpp)時間8年前 (2017/08/07 18:38)推噓2(2推 0噓 5→)

留言7則, 4人參與討論串1/1

各位版大好, 小弟剛學寫網頁, 最近接觸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